/* Catowl portfolio: greyscale frame so the artwork carries the colour. */
@font-face {
  font-family: "Huninn";
  src: url("fonts/huninn-subset.woff2") format("woff2");
  font-display: swap;
}

:root {
  --ink: #000;
  --char: #1d1d1d;
  --graphite: #5a5a5a;
  --fog: #dcdcdc;
  --mist: #f0f0f0;
  --paper: #fff;
  --on-ink-soft: #b5b5b5;
  --gutter: clamp(16px, 4vw, 56px);
  --head: "Huninn", "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
  --body: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--char);
  font: 400 1.0625rem/1.8 var(--body);
}
html[lang="en"] body { line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--head); font-weight: 400; color: var(--ink); margin: 0; line-height: 1.25; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 8px; z-index: 20; }
.skip:focus { top: 8px; }

.preview-banner {
  background: var(--mist); color: var(--graphite);
  font-size: .8125rem; text-align: center; padding: 6px var(--gutter);
}
.tbc {
  display: inline-block; vertical-align: middle;
  font: 500 .6875rem/1 var(--body); color: var(--graphite);
  border: 1px dashed var(--graphite); border-radius: 999px; padding: 3px 7px; margin-left: 6px;
}

/* Header */
.site-header {
  display: flex; align-items: center; gap: 24px;
  padding: 10px var(--gutter);
}
.brand img { width: 56px; height: 56px; }
.site-header nav { display: flex; gap: clamp(14px, 2.4vw, 36px); margin: 0 auto; }
.site-header nav a { text-decoration: none; font-size: .9375rem; padding: 8px 0; }
.site-header nav a:hover { text-decoration: underline; text-underline-offset: 6px; }
.lang {
  display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; padding: 3px;
  text-decoration: none; font: 500 .875rem/1 var(--body); min-height: 44px; align-items: center;
}
.lang span { padding: 9px 12px; border-radius: 999px; }
.lang .on { background: var(--ink); color: var(--paper); }
.lang:hover span:not(.on) { background: var(--mist); }

/* Hero: one black panel with both seabird towels shown whole (landscape under the headline,
   portrait standing on the right) and the crayon trail. */
.hero {
  position: relative; isolation: isolate;
  margin: 0 clamp(8px, 1.4vw, 20px);
  background: var(--ink); color: var(--paper);
  border-radius: 28px; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(170px, 18vw, 270px);
  gap: 0 clamp(16px, 2vw, 32px); align-items: end;
}
.hero-main { position: relative; min-width: 0; padding-top: clamp(40px, 7vw, 104px); }
/* Right column: the owl at the top, the portrait towel filling the rest down to the corner.
   The towel has no height of its own here, so the column never makes the panel taller than the text side. */
.hero-side { align-self: stretch; display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 0; }
.hero-owl { flex: none; width: min(62%, 150px); margin: clamp(24px, 3vw, 44px) 0 clamp(14px, 2vw, 24px); }
.hero-tall { margin: 0; flex: 1 1 0; min-height: 0; width: 100%; }
.hero-tall img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.hero-text { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 58rem; }
.hero h1 { color: var(--paper); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.22; }
html[lang="en"] .hero h1 { letter-spacing: -0.01em; }
.hero-lead { margin-top: 22px; color: var(--on-ink-soft); max-width: 34em; }
.pill {
  display: inline-flex; align-items: center; min-height: 48px; margin-top: 28px; padding: 0 26px;
  background: var(--paper); color: var(--ink); border-radius: 999px; text-decoration: none; font-weight: 500;
}
.pill:hover { background: var(--fog); }
.hero-jump { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.hero-jump .pill { margin-top: 0; }
.pill--line { background: transparent; color: var(--paper); box-shadow: inset 0 0 0 1.5px var(--paper); }
.pill--line:hover { background: var(--paper); color: var(--ink); }
.hero .trail { display: block; position: relative; width: 100%; height: clamp(84px, 9vw, 140px); margin-top: 12px; pointer-events: none; }
.trail-path {
  fill: none; stroke: var(--paper); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: draw 2.6s .3s cubic-bezier(.45, .05, .25, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.hero-art { position: relative; z-index: 2; margin: 0; }
.hero-art img { width: 100%; }
.hero-art img { border-radius: 0 12px 0 0; }
.hero-art figcaption { font-size: .8125rem; color: var(--on-ink-soft); padding: 12px var(--gutter) 18px; }

/* Intro */
.intro {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px var(--gutter);
  padding: clamp(64px, 9vw, 128px) var(--gutter) clamp(40px, 6vw, 80px);
  align-items: start;
}
.intro h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.intro p { max-width: 32em; padding-top: 8px; }

.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-bottom: 28px; }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); }
.section-head p { color: var(--graphite); font-size: .9375rem; }

/* Selected work: one block per project. Images in a row share one height and keep their own proportions. */
.work { padding: 0 var(--gutter) clamp(72px, 9vw, 128px); }
.work-list {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(44px, 5.5vw, 80px) clamp(16px, 2vw, 28px); align-items: start;
}
.project { margin: 0; min-width: 0; grid-column: span var(--span); --maxh: 560px; }
.project-art {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start;
  gap: 14px clamp(14px, 1.8vw, 26px);
  background: var(--mist); border-radius: 20px; padding: clamp(14px, 2vw, 28px);
}
.work-col { grid-column: span var(--cspan); display: grid; gap: 14px; min-width: 0; }
.art-row { display: flex; gap: 14px; max-width: calc(var(--sum) * var(--maxh)); }
.art { min-width: 0; display: grid; gap: 6px; align-content: start; }
.art-btn { all: unset; box-sizing: border-box; display: block; cursor: zoom-in; border-radius: 8px; }
.art-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.art-btn img { width: 100%; height: auto; border-radius: 8px; transition: opacity .15s; }
.art-btn:hover img { opacity: .9; }
.art-label { font-size: .8125rem; color: var(--graphite); }
.work-col--photo .art-btn img { border-radius: 14px; }
.col-credit { display: flex; flex-wrap: wrap; gap: 2px 14px; align-items: baseline; font-size: .875rem; color: var(--graphite); }
.col-credit a { color: var(--ink); text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.project figcaption { padding: 14px 4px 0; display: grid; gap: 2px; justify-items: start; }
.piece-title { font-family: var(--head); font-size: 1.25rem; color: var(--ink); line-height: 1.35; }
.piece-meta, .piece-credit { font-size: .875rem; color: var(--graphite); }
.piece-note { font-size: .9375rem; color: var(--char); max-width: 40em; margin-top: 6px; }
.work-link {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 18px;
  border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9375rem;
}
.work-link:hover { background: var(--ink); color: var(--paper); }
@media (max-width: 900px) {
  .project, .work-col { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .art-row { flex-wrap: wrap; max-width: none; gap: 10px; }
  .art { flex: 1 1 calc(50% - 5px) !important; }
  .art:only-child { flex-basis: 100% !important; }
}

/* Maps and tools: the one dark band below the hero. */
.maps {
  background: var(--ink); color: var(--paper);
  margin: 0 clamp(8px, 1.4vw, 20px); border-radius: 28px;
  padding: clamp(48px, 7vw, 96px) var(--gutter);
}
.maps h2, .maps h3 { color: var(--paper); }
.maps .section-head p { color: var(--on-ink-soft); }
.tools { display: grid; gap: clamp(36px, 5vw, 64px); }
.tool { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px); align-items: center; }
.tool:nth-child(even) .tool-shot { order: 2; }
.tool-shot { border-radius: 14px; border: 1px solid #333; width: 100%; }
.tool h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }
.tool-client { color: var(--on-ink-soft); font-size: .9375rem; margin: 4px 0 12px; }
.tool-text > p { max-width: 32em; }
.tool-note { margin-top: 10px; color: var(--on-ink-soft); font-size: .9375rem; }
.tool-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.tool-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--paper); border-radius: 999px; text-decoration: none; font-weight: 500;
}
.tool-links a:hover { background: var(--paper); color: var(--ink); }
.maps .tbc { color: var(--on-ink-soft); border-color: var(--on-ink-soft); }

/* Tools: same rows as maps, on paper instead of ink. */
.tools-section { padding: clamp(72px, 9vw, 128px) var(--gutter) 0; }
.tools-section .tool-client, .tools-section .tool-note { color: var(--graphite); }
.tools-section .tool-links a { border-color: var(--ink); }
.tools-section .tool-links a:hover { background: var(--ink); color: var(--paper); }
.tools-section .tbc { color: var(--graphite); border-color: var(--graphite); }

/* About and contact */
.about {
  display: grid; grid-template-columns: minmax(140px, 260px) minmax(0, 40rem); gap: 24px clamp(32px, 6vw, 96px);
  align-items: center; padding: clamp(72px, 9vw, 128px) var(--gutter) 0;
}
.about h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 14px; }
.about h3 { font-size: 1.125rem; margin: 28px 0 8px; }
.clients { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.clients li { border: 1px solid var(--fog); border-radius: 999px; padding: 4px 14px; font-size: .9375rem; }
.contact { padding: clamp(72px, 9vw, 128px) var(--gutter); }
.contact h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 10px; }
.contact p { color: var(--graphite); max-width: 32em; }
.email {
  display: inline-block; margin-top: 18px; font-family: var(--head);
  font-size: clamp(1.5rem, 4.6vw, 3.4rem); color: var(--ink); text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 3px solid var(--ink); line-height: 1.3;
}
.email:hover { border-bottom-color: var(--graphite); }

.site-footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding: 22px var(--gutter) 32px; border-top: 1px solid var(--fog); color: var(--graphite); font-size: .875rem;
}
.site-footer a { min-height: 44px; display: inline-flex; align-items: center; }

/* Full-artwork viewer */
.viewer { border: 0; padding: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--ink); color: var(--paper); }
.viewer::backdrop { background: rgb(0 0 0 / .85); }
.viewer form { position: absolute; top: 12px; right: 12px; z-index: 1; }
.viewer-close { min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1.5px solid var(--paper); background: var(--ink); color: var(--paper); font: 500 1rem var(--body); cursor: pointer; }
.viewer-body { height: 100%; overflow: auto; display: grid; gap: 16px; place-items: center; padding: 68px 16px 16px; }
.viewer-body img { max-height: calc(100dvh - 96px); width: auto; object-fit: contain; cursor: zoom-in; }
.viewer-body.is-zoomed { place-items: start; }
.viewer-body.is-zoomed img { max-height: none; max-width: none; width: auto; cursor: zoom-out; }
.viewer-hint { position: absolute; top: 22px; left: 20px; margin: 0; font-size: .875rem; color: var(--on-ink-soft); }

/* Tablet and phone */
@media (max-width: 900px) {
}
@media (max-width: 700px) {
  .site-header { flex-wrap: wrap; gap: 8px 12px; }
  .site-header nav { order: 3; width: 100%; justify-content: space-between; margin: 0; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; }
  .hero-main { padding-top: 40px; }
  .hero-owl { display: none; }
  .hero-tall { flex: none; width: 52%; padding-bottom: 24px; }
  .hero-tall img { height: auto; }
  .hero-art { margin-top: 0; }
  .intro, .about, .tool { grid-template-columns: 1fr; }
  .tool:nth-child(even) .tool-shot { order: 0; }
  .about-owl { width: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .trail-path { animation: none; stroke-dashoffset: 0; }
}

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* EcoGuide gallery: one large screenshot, the rest as a row of thumbnails; each opens full size. */
.tool--gallery { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.tool-gallery { display: grid; gap: 12px; }
.shot-btn { all: unset; box-sizing: border-box; cursor: zoom-in; display: block; border-radius: 14px; overflow: hidden; border: 1px solid #333; background: var(--char); }
.shot-btn:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.shot-btn img { width: 100%; }
.shot-thumbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.shot-thumbs:has(> :only-child) .shot-thumb { aspect-ratio: auto; }
.shot-thumbs:has(> :only-child) .shot-thumb img { height: auto; }
.shot-thumb { aspect-ratio: 4 / 3; }
.shot-thumb img { height: 100%; object-fit: cover; object-position: top left; }
.shot-btn:hover { border-color: var(--on-ink-soft); }
@media (max-width: 700px) {
  .tool--gallery { grid-template-columns: 1fr; }
  .shot-thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.shot-thumbs:has(> :only-child) { grid-template-columns: 1fr; }

/* Team */
.team { padding: clamp(72px, 9vw, 128px) var(--gutter) 0; }
.team h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 28px; }
.team-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px clamp(24px, 4vw, 64px); max-width: 60rem; }
.member { display: flex; gap: 20px; align-items: center; }
.member-mark { width: 112px; height: 112px; flex: none; border-radius: 50%; background: var(--mist); object-fit: contain; }
.member-mark--name {
  display: grid; place-items: center; background: var(--paper);
  border: 3px solid var(--ink); font-family: var(--head); font-size: 1.6rem; color: var(--ink);
}
.member h3 { font-size: 1.4rem; margin-bottom: 8px; }
.roles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.roles li { border: 1px solid var(--fog); border-radius: 999px; padding: 2px 12px; font-size: .875rem; }
.roles li:first-child { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Social media buttons under the email address */
.social { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.social a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 16px;
  border: 1.5px solid var(--ink); border-radius: 999px; text-decoration: none; font-weight: 500;
}
.social a:hover { background: var(--ink); color: var(--paper); }
.social svg { flex: none; }
.social a svg path { fill: currentColor; stroke: none; }
.social-handle { font-weight: 400; color: var(--graphite); font-size: .875rem; }
.social a:hover .social-handle { color: var(--fog); }

/* Illustration styles: one row of square samples that scrolls sideways. */
.styles { margin: 0 0 clamp(44px, 5.5vw, 80px); }
.styles-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-bottom: 16px; }
.styles-head h3 { font-size: 1.35rem; }
.styles-head p { color: var(--graphite); font-size: .9375rem; }
.styles-nav { margin-left: auto; display: flex; gap: 8px; }
.styles-btn {
  width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper);
  color: var(--ink); font: 400 1.6rem/1 var(--body); cursor: pointer; display: grid; place-items: center; padding: 0 0 3px;
}
.styles-btn:hover { background: var(--ink); color: var(--paper); }
.styles-btn:disabled { opacity: .3; cursor: default; background: var(--paper); color: var(--ink); }
.styles-row {
  list-style: none; margin: 0; padding: clamp(14px, 2vw, 28px); display: flex; gap: clamp(14px, 1.8vw, 24px);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: clamp(14px, 2vw, 28px); overscroll-behavior-x: contain; scrollbar-width: thin;
  background: var(--mist); border-radius: 20px;
}
.style-card { flex: 0 0 clamp(240px, 26vw, 380px); scroll-snap-align: start; display: grid; gap: 8px; }
.style-card .art-btn img { aspect-ratio: 1; object-fit: cover; }

/* Pinned top bar: stays at the top while scrolling; a hairline appears once the page has moved. */
.site-header {
  position: sticky; top: 0; z-index: 20; background: var(--paper);
  transition: box-shadow .2s;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 var(--fog); }
:root { --header-h: 76px; }
section[id], figure[id], .styles { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (max-width: 700px) {
  :root { --header-h: 104px; }
  .site-header { padding-top: 6px; padding-bottom: 6px; }
  .brand img { width: 44px; height: 44px; }
}

/* Back to top: lower right, appears after the hero. */
.to-top {
  position: fixed; right: clamp(14px, 2.4vw, 32px); bottom: clamp(14px, 2.4vw, 32px); z-index: 20;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 18px 0 14px;
  background: var(--ink); color: var(--paper); border-radius: 999px; text-decoration: none; font-weight: 500; font-size: .9375rem;
  box-shadow: 0 0 0 2px var(--paper);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .2s, transform .2s;
}
.to-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--char); }
.to-top:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
@media (max-width: 700px) {
  .to-top { padding: 0; width: 48px; justify-content: center; }
  .to-top-text { display: none; }
}
@media (prefers-reduced-motion: reduce) { .to-top, .site-header { transition: none; } }

/* The route finishes at the owl's feet. JS measures the real layout in either language. */
.hero.trail-connected .trail { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; z-index: 1; overflow: visible; }
.trail-space { height: clamp(84px, 9vw, 140px); margin-top: 12px; }
.hero.trail-connected .trail-path { stroke-width: 2.5; animation: none; stroke-dashoffset: 0; }
.hero.trail-playing .trail-path { animation: draw 2.5s .15s cubic-bezier(.4,0,.25,1) both; }
.hero.trail-playing .hero-owl { animation: owl-arrives .8s 2.25s ease-out both; }
.hero-owl { position: relative; z-index: 2; }
@keyframes owl-arrives { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width:700px) {
  .hero.trail-connected .hero-owl { display: block; position: absolute; width: 60px; height: auto; right: 24px; top: var(--owl-top); margin: 0; }
  .trail-space { height: 120px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero.trail-playing .trail-path, .hero.trail-playing .hero-owl { animation: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
}