@font-face {
  font-family: Huninn;
  src: url("assets/fonts/jf-openhuninn-2.1.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #211f1a;
  --muted: #5a554b;
  --line: #dedbd2;
  --gold: #d5cc59;
  --mount: #f4f2eb;
  --heading: Huninn, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --body: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.9 var(--body); }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: .3em; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
img { display: block; width: 100%; object-fit: cover; }
figure, h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--heading); font-weight: 400; line-height: 1.3; }
h1 { font-size: clamp(34px, 5vw, 61px); letter-spacing: .085em; }
h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: .075em; }
h3 { font-size: clamp(19px, 2.2vw, 25px); letter-spacing: .045em; }
.wrap { width: min(1080px, calc(100% - 88px)); margin-inline: auto; }
.skip { position: fixed; top: 0; left: 12px; z-index: 2; padding: 8px 12px; background: white; transform: translateY(-150%); }
.skip:focus { transform: none; }
.mast { position: relative; display: grid; justify-items: center; padding-top: 24px; border-bottom: 1px solid var(--line); }
.logo img { width: auto; height: 68px; }
.mast nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(22px, 4.5vw, 56px); padding-block: 17px 15px; }
.mast nav a, .mast-contact { font-size: 14px; letter-spacing: .08em; }
.mast nav a[aria-current] { text-decoration: underline; text-decoration-color: #9b8c28; text-decoration-thickness: 2px; text-underline-offset: .55em; }
.mast-contact { position: absolute; top: 45px; right: 0; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.mast-contact span, .text-link span, .button span { margin-left: 9px; }
.hero { display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: clamp(25px, 5vw, 60px); margin-top: 26px; padding: clamp(26px, 4vw, 54px); background: var(--mount); }
.hero h1 { font-size: clamp(44px, 5.6vw, 72px); }
.hero img { aspect-ratio: 1.42; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 18px; }
.eyebrow { color: var(--muted); font-size: 12px; letter-spacing: .16em; margin-bottom: 15px; }
.eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; margin: 0 10px .28em 0; background: var(--gold); }
.lede { margin-top: 16px; color: var(--muted); letter-spacing: .02em; }
.button, .text-link { display: inline-flex; align-items: baseline; font-size: 14px; letter-spacing: .04em; }
.button { margin-top: 22px; padding: 8px 14px; border: 1px solid var(--ink); background: var(--ink); color: white; }
.button:hover { background: #454034; }
.text-link { margin-top: 15px; border-bottom: 1px solid var(--ink); }
figcaption { padding-top: 7px; text-align: right; color: var(--muted); font-size: 12px; letter-spacing: .09em; }
.collection, .archive-section { margin-block: 44px; }
.section-head { padding-top: 15px; margin-bottom: 19px; border-top: 1px solid var(--line); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.cards img { aspect-ratio: 1.55; }
.cards h3 { margin: 12px 0 5px; }
.collection .cards h3 { display: flex; justify-content: space-between; align-items: baseline; }
.collection .cards h3 span { font: 14px var(--body); }
.cards p, .panel p, .split p:not(.eyebrow), .split li { color: var(--muted); }
.home .archive-cards article { border-top: 1px solid var(--line); padding-block: 12px; }
.journal-more { margin: -30px 0 44px; }
.inner { padding-block: 38px 58px; }
.page-intro { margin: 0 auto 30px; max-width: 690px; text-align: center; }
.page-intro .lede { max-width: 60ch; margin-inline: auto; }
.split { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); align-items: center; gap: clamp(25px, 5vw, 60px); padding-block: 24px; border-top: 1px solid var(--line); }
.split img { aspect-ratio: 1.45; }
.split h2, .panel h2 { margin-bottom: 9px; }
.panel { margin-top: 22px; padding: clamp(20px, 3.6vw, 38px); background: var(--mount); }
.panel h2 { font-size: clamp(23px, 2.7vw, 32px); }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair > div > .panel { height: calc(100% - 22px); }
.breadcrumb { font-size: 13px; margin-bottom: 19px; color: var(--muted); }
.breadcrumb a { text-decoration: underline; text-underline-offset: .22em; }
.footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 20px; padding-block: 22px 26px; border-top: 1px solid var(--line); }
.footer div { display: flex; flex-wrap: wrap; gap: 7px 18px; font-size: 14px; }
.copyright { flex-basis: 100%; color: var(--muted); font-size: 12px; }
.entry-meta { margin-top: 9px; font-size: 12px; letter-spacing: .09em; }
.entry-photo { max-width: 720px; margin-inline: auto; }
.entry-photo img { width: auto; max-width: 100%; max-height: 580px; margin-inline: auto; }
.project-photo { object-position: center 43%; }
.course-photo { object-position: center 56%; }
.rabbit-photo { object-position: 62% center; }

/* Artwork cards share a small viewing size and retain the existing crop. */
.catalog-index { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 26px; margin-bottom: 24px; padding-block: 10px; border-block: 1px solid var(--line); font-size: 14px; }
.works-feature { grid-template-columns: minmax(0, 340px) minmax(0, 440px); justify-content: center; border-top: 0; background: var(--mount); padding: clamp(20px, 4vw, 36px); }
.works-feature img { aspect-ratio: auto; }
.works-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 5vw, 72px); }
.works-page .cards article { display: flow-root; min-height: 146px; padding-block: 14px; border-bottom: 1px solid var(--line); }
.works-page .cards figure { float: left; width: clamp(92px, 10vw, 130px); margin: 0 17px 3px 0; aspect-ratio: 1.12; }
.works-page .cards h3 { margin: 2px 0 5px; }
.works-page .cards .entry-meta { margin-top: 0; }
.works-page .cards article > p { font-size: 14px; line-height: 1.75; }
.recent-works img { height: 100%; aspect-ratio: auto; object-fit: contain; background: var(--mount); }
.photo-crop { position: relative; overflow: hidden; aspect-ratio: 1.12; }
.photo-crop img, .entry-photo.photo-crop img { position: absolute; inset: -39% auto auto -30%; width: 166.667%; max-width: none; max-height: none; aspect-ratio: auto; }
.photo-crop-flower img, .entry-photo.photo-crop-flower img { width: 196%; top: -49%; left: -35%; }
.work-detail { max-width: 860px; }
.work-sheet { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 62px); padding-block: 23px 35px; border-top: 1px solid var(--line); }
.work-sheet .entry-photo { width: min(100%, 295px); margin: 13px auto; box-shadow: 0 0 0 13px var(--mount); }
.work-note .eyebrow { margin-bottom: 8px; }
.work-note h1 { font-size: clamp(35px, 5vw, 58px); }
.reading { margin-top: 3px; font-size: 14px; letter-spacing: .19em; color: var(--muted); }
.work-pagination { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; padding-block: 13px; border-block: 1px solid var(--line); font-size: 14px; }
.work-pagination > :last-child { text-align: right; }
@media (max-width: 760px) {
  .wrap { width: calc(100% - 36px); }
  .mast { padding-top: 13px; }
  .logo img { height: 53px; }
  .mast-contact { top: 26px; }
  .mast nav { gap: 6px 16px; padding-block: 12px; }
  .mast nav a, .mast-contact { font-size: 12px; }
  .hero, .split, .pair, .work-sheet { grid-template-columns: 1fr; }
  .hero { margin-top: 18px; gap: 23px; padding: 22px; }
  .hero h1 { font-size: clamp(40px, 9vw, 54px); }
  .collection, .archive-section { margin-block: 30px; }
  .inner { padding-block: 29px 42px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
  .works-page .cards { grid-template-columns: 1fr; }
  .works-page .cards article { min-height: 115px; }
  .work-sheet { gap: 24px; }
  .work-sheet .entry-photo { width: min(80%, 280px); }
  .work-pagination { font-size: 12px; }
  .journal-more { margin: -20px 0 32px; }
}
@media (max-width: 390px) {
  .mast nav { column-gap: 11px; }
  .collection .cards { grid-template-columns: 1fr; }
}

.cookie-copy { max-width: 720px; margin-inline: auto; }
.cookie-copy .text-link { overflow-wrap: anywhere; display: inline-block; }

.cookie-notice {
  position: fixed;
  inset: auto 0 0;
  z-index: 1;
  border-top: 1px solid var(--line);
  background: var(--mount);
}
.cookie-notice-inner {
  width: min(1080px, calc(100% - 36px));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 12px 0 max(12px, env(safe-area-inset-bottom));
  font-size: 14px;
}
.cookie-notice strong { margin-right: 8px; }
.cookie-notice a { text-decoration: underline; text-underline-offset: .22em; }
.cookie-dismiss {
  padding: 7px 16px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: white;
  font: inherit;
  cursor: pointer;
}
.cookie-dismiss:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

@media (min-width: 761px) {
  .mast {
    display: flex;
    align-items: center;
    gap: clamp(24px, 4vw, 60px);
    width: 100%;
    padding: 10px clamp(20px, 3vw, 48px);
  }
  .mast .logo { flex: 0 0 auto; }
  .mast .logo img { height: 58px; }
  .mast nav {
    justify-content: flex-start;
    gap: 8px clamp(16px, 2.6vw, 42px);
    padding: 0;
  }
  .mast-contact { position: static; margin-left: auto; }
}

.home .hero {
  display: block;
  margin-top: 0;
  padding: 0;
  background: none;
}
.home .hero img { aspect-ratio: 2.2; object-position: center 53%; }
.home .hero-copy {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 24px;
  align-items: end;
  padding: 23px 0 18px;
  border-bottom: 1px solid var(--line);
}
.home .hero-copy .eyebrow, .home .hero-copy .lede { grid-column: 1; margin: 0; }
.home .hero-copy h1 { grid-column: 1; font-size: clamp(27px, 4.2vw, 50px); }
.home .hero-copy .text-link { grid-column: 2; grid-row: 2 / 4; margin: 0; white-space: nowrap; }
.home .section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.home .section-head .text-link { margin: 0; }
.home-news { margin-top: 36px; }
.home-news ul { margin: 0; padding: 0; list-style: none; }
.home-news li { border-bottom: 1px solid var(--line); }
.home-news li a { display: grid; grid-template-columns: 105px 1fr auto; gap: 12px; align-items: baseline; padding: 10px 0; }
.home-news time { color: var(--muted); font-size: 13px; letter-spacing: .05em; }
.home-works { max-width: 830px; }
.home-works figure { padding: 10px; background: var(--mount); }
.home-works img { aspect-ratio: 1.35; object-fit: contain; }
.home-experiences { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 830px; }
.home-experiences img { aspect-ratio: 1.7; }
@media (max-width: 760px) {
  .home .hero { margin-top: 14px; }
}
@media (max-width: 600px) {
  .home .hero img { aspect-ratio: 1.45; }
  .home .hero-copy { display: block; }
  .home .hero-copy h1 { margin: 6px 0; }
  .home .hero-copy .text-link { margin-top: 11px; }
  .home-news li a { grid-template-columns: 74px 1fr auto; gap: 7px; font-size: 14px; }
  .home-news time { font-size: 11px; }
  .home-works { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .home-works figure { padding: 4px; }
  .home-works h3 { font-size: 16px; }
  .home-experiences { gap: 14px; }
}


/* The opening image spans the page while its caption and editorial sections align. */
.home .hero img {
  height: clamp(330px, 45vw, 680px);
  aspect-ratio: auto;
}
@media (max-width: 760px) {
  .home .hero { margin-top: 0; }
  .home .hero img {
    height: auto;
    aspect-ratio: 1.45;
  }
}

/* Full-width section backgrounds share the same content alignment as the hero caption. */
.home .home-band {
  margin: 0;
  padding: clamp(28px, 4.6vw, 64px) max(44px, calc((100% - 1080px) / 2));
  border-bottom: 1px solid var(--line);
}
.home .home-band .section-head {
  border-top: 0;
  padding-top: 0;
}
.home-band-works { background: var(--mount); }
.home-band-works figure { background: var(--paper); }
.home-band-experiences { background: #faf9f5; }
.home .hero-copy { border-bottom: 0; }
.home .hero { border-bottom: 1px solid var(--line); }
@media (max-width: 760px) {
  .home .home-band { padding-inline: 18px; }
}

.home .home-works {
  max-width: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.home .home-signatures { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 820px; }
.home-signatures .photo-crop { padding: 0; aspect-ratio: 1.35; }
.home-signatures .entry-meta + h3 { margin-top: 2px; }
.home-purposes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.home-purposes a { display: grid; padding: 16px 19px; border: 1px solid var(--line); background: var(--paper); }
.home-purposes strong { font-family: var(--heading); font-size: 20px; font-weight: 400; }
.home-purposes span { font-size: 13px; color: var(--muted); }
.home-story { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(20px, 5vw, 64px); padding-block: 24px; }
.home-story + .home-story { border-top: 1px solid var(--line); }
.home-story img { aspect-ratio: 1.75; }
.home-story h3 { margin-bottom: 10px; }
.home-story p, .home-about p { color: var(--muted); max-width: 48ch; }
@media (min-width: 761px) {
  .home-story:nth-of-type(even) figure { grid-column: 2; grid-row: 1; }
  .home-story:nth-of-type(even) div { grid-column: 1; grid-row: 1; }
}
@media (max-width: 760px) {
  .home .home-works { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-purposes, .home-story { grid-template-columns: 1fr; }
  .home-story { padding-block: 16px; }
}
.home-signatures .photo-crop img { aspect-ratio: auto; }

/* Recent works use the same square format and a consistent viewing scale. */
.home [aria-labelledby="recent-title"] .home-works {
  grid-template-columns: repeat(4, minmax(0, 205px));
  justify-content: space-between;
  gap: clamp(12px, 2.5vw, 35px);
}
.home [aria-labelledby="recent-title"] article {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.home [aria-labelledby="recent-title"] figure { padding: 0; }
.home [aria-labelledby="recent-title"] img {
  aspect-ratio: 1;
  object-fit: cover;
}
.home [aria-labelledby="recent-title"] img[src$="recent-rabbit.jpg"] {
  object-position: 63% center;
}
.home [aria-labelledby="recent-title"] h3 {
  margin-top: 10px;
  text-align: center;
  font-size: clamp(17px, 2vw, 21px);
}
@media (max-width: 760px) {
  .home [aria-labelledby="recent-title"] .home-works {
    grid-template-columns: repeat(2, minmax(0, 205px));
    gap: 18px;
  }
}

/* Set the opening text within the image rather than in a separate strip. */
.home .hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 0;
  background: #29231d;
}
.home .hero figure,
.home .hero-copy { grid-area: 1 / 1; }
.home .hero figure { min-width: 0; }
.home .hero figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(24 19 14 / 78%), rgb(24 19 14 / 40%) 40%, transparent 75%);
}
.home .hero-copy {
  position: relative;
  display: block;
  align-self: end;
  padding-block: clamp(34px, 6vw, 88px);
  color: #fffdf8;
}
.home .hero-copy .eyebrow,
.home .hero-copy .lede { color: inherit; }
.home .hero-copy h1 { margin: 9px 0 10px; }
.home .hero-copy .text-link {
  margin-top: 17px;
  border-color: currentColor;
}
.home .hero-copy a:focus-visible { outline-color: currentColor; }
@media (max-width: 760px) {
  .home .hero img {
    height: clamp(370px, 88vw, 520px);
    aspect-ratio: auto;
  }
  .home .hero figure::after {
    background: linear-gradient(0deg, rgb(24 19 14 / 90%), rgb(24 19 14 / 52%) 40%, transparent 77%);
  }
  .home .hero-copy { padding-block: 27px; }
}


.home [aria-labelledby="recent-title"] .entry-meta { margin-top: 0; text-align: center; }
.works-page .recent-works .entry-meta { margin-bottom: 4px; }
.works-page .recent-works article { scroll-margin-top: 20px; }

.journal-story, .journal-article-nav {
  width: min(100%, 680px);
  margin-inline: auto;
}
.journal-story { margin-block: clamp(26px, 5vw, 52px); }
.journal-story section + section {
  margin-top: 25px;
  padding-top: 21px;
  border-top: 1px solid var(--line);
}
.journal-story h2 {
  margin-bottom: 9px;
  font-size: clamp(22px, 2.8vw, 30px);
}
.journal-story p { color: var(--muted); }
.journal-story ul { padding-left: 22px; }
.journal-story li a { text-decoration: underline; text-underline-offset: .2em; }
.journal-article-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 22px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.design-trajectory img { aspect-ratio: auto; }



.trajectory-page { width: min(1240px, calc(100% - 88px)); }
.trajectory-stage { margin-block: 42px 58px; }
.stage-index {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.stage-index a {
  padding: 13px 5px;
  text-align: center;
  font: clamp(14px, 1.6vw, 19px) var(--heading);
}
.stage-index span { color: var(--muted); font-size: .75em; }
.stage-index a[aria-current] {
  background: var(--mount);
  box-shadow: inset 0 -3px var(--gold);
}
.stage-act {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.35fr);
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
  padding: clamp(32px, 5vw, 70px) clamp(0px, 2.5vw, 34px);
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 65px;
}
.stage-act:nth-of-type(even) { background: var(--mount); }
.stage-act:nth-of-type(even) .stage-menu { grid-column: 1; grid-row: 1; }
.stage-act:nth-of-type(even) .stage-copy { grid-column: 2; grid-row: 1; }
.stage-act:nth-of-type(even) { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); }
.stage-copy h2 { font-size: clamp(43px, 5vw, 72px); margin-bottom: 10px; }
.stage-copy h3 { font-size: clamp(21px, 2.5vw, 28px); margin-bottom: 11px; }
.stage-copy p:not(.eyebrow) { font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); }
.stage-cue { margin-top: 17px; padding-left: 13px; border-left: 2px solid var(--gold); }
.stage-cue strong { color: var(--ink); margin-right: 6px; }
.stage-menu img { height: auto; }
.stage-menu figcaption a { text-decoration: underline; }
.stage-entered .stage-menu { animation: stage-arrive .7s ease both; }
.stage-entered .stage-copy { animation: stage-arrive .65s ease both; }
@keyframes stage-arrive {
  from { opacity: .45; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 760px) {
  .trajectory-page { width: calc(100% - 36px); }
  .stage-act, .stage-act:nth-of-type(even) { grid-template-columns: 1fr; padding-inline: 12px; }
  .stage-act:nth-of-type(even) .stage-copy, .stage-act:nth-of-type(even) .stage-menu { grid-area: auto; }
  .stage-index span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stage-entered .stage-menu, .stage-entered .stage-copy { animation: none; }
}

@media (prefers-reduced-motion: no-preference) {
  html.trajectory-scroll { scroll-behavior: smooth; }
}

.inquiry form:not([hidden]) {
  display: grid;
  gap: 13px;
  max-width: 620px;
  margin-top: 15px;
}
.inquiry label { display: grid; gap: 4px; }
.inquiry :is(input, select, textarea) {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
}
.inquiry .button { justify-self: start; margin-top: 3px; cursor: pointer; }

.course-inquiry {
  display: grid;
  grid-template-columns: minmax(0, 235px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(18px, 4vw, 48px);
}
.course-inquiry img { aspect-ratio: 1.45; }
.course-inquiry figcaption { text-align: left; }
.course-inquiry .course-inquiry-options {
  margin-top: 8px;
  font-size: 13px;
  letter-spacing: .04em;
}
@media (max-width: 600px) {
  .course-inquiry { grid-template-columns: 1fr; }
  .course-inquiry figure { width: min(100%, 235px); }
}