/* The studio home page: warm paper, ink outlines, a room that introduces itself.
   Ported from the class assignment's styles.css (camifatechab/portfolioStudio), keeping only
   what the home page uses: colours, header, the drawing board and its pieces. The fonts come
   from the Google Fonts link in the page head.
   Everything is scoped under .studio-page so none of it reaches the other pages. */

/* ---------- 1. Colours ---------- */

.studio-page {
  --paper: #f6f1e7;      /* page background: warm white */
  --card: #fffdf8;       /* cards and photo frames */
  --board: #dcc9ae;      /* tan drawing board behind the room */
  --ink: #2f241c;        /* brown, used instead of black */
  --ink-soft: #5a4a3d;   /* body text */
  --ink-muted: #7a6858;  /* small labels */
  --line: rgba(47, 36, 28, .2);
  --dash: rgba(47, 36, 28, .32);
  --shadow: rgba(47, 36, 28, .16);
  --accent: #a8532f;     /* terracotta: the only button colour */
  --green: #3f6c56;      /* small touches only */
  --dots: rgba(47, 36, 28, .08);          /* the dot pattern on the paper */
  --grid: rgba(47, 36, 28, .08);          /* the grid on the drawing board */
  --board-glow: rgba(255, 247, 232, .85); /* the soft light behind the room */
  --veil: rgba(255, 253, 248, .88);       /* paper backing for labels over the room */
  --hover-veil: rgba(255, 253, 248, .3);  /* inside the dashed outline of a pointed-at object */
  --pad: clamp(20px, 3.4vw, 48px);
  --max: 1280px;
  --mono: ui-monospace, 'Cascadia Mono', Menlo, Consolas, monospace;
  --hand: 'Shantell Sans', 'Segoe Print', cursive;
  /* the site's own ink tints (styles.css), warmed to the homework's brown */
  --ink-85: rgba(47, 36, 28, .85);
  --ink-75: rgba(47, 36, 28, .75);
  --ink-60: rgba(47, 36, 28, .6);
  --ink-50: rgba(47, 36, 28, .5);
  --ink-45: rgba(47, 36, 28, .45);
  --border-faint: rgba(47, 36, 28, .2);
  --card-lighter: #FFFDF8;

  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr;
  color: var(--ink);
  font: 500 16px/1.6 'Space Grotesk', 'Segoe UI', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
  /* A faint dot pattern keeps the paper from looking flat. */
  background: radial-gradient(var(--dots) 1px, transparent 1.3px) 0 0 / 22px 22px, var(--paper);
}

/* Evening. When the desk lamp switches the studio to evening (engine.js sets data-mood on the
   page), the home page turns dark with the room: espresso paper, cream ink and a lighter
   terracotta that stays easy to read. The colours are registered so they fade with the room.
   The other pages of the site keep their own style. */
@property --paper { syntax: '<color>'; inherits: true; initial-value: #f6f1e7; }
@property --card { syntax: '<color>'; inherits: true; initial-value: #fffdf8; }
@property --board { syntax: '<color>'; inherits: true; initial-value: #dcc9ae; }
@property --ink { syntax: '<color>'; inherits: true; initial-value: #2f241c; }
@property --ink-soft { syntax: '<color>'; inherits: true; initial-value: #5a4a3d; }
@property --ink-muted { syntax: '<color>'; inherits: true; initial-value: #7a6858; }
@property --line { syntax: '<color>'; inherits: true; initial-value: rgba(47, 36, 28, .2); }
@property --dash { syntax: '<color>'; inherits: true; initial-value: rgba(47, 36, 28, .32); }
@property --shadow { syntax: '<color>'; inherits: true; initial-value: rgba(47, 36, 28, .16); }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #a8532f; }
@property --green { syntax: '<color>'; inherits: true; initial-value: #3f6c56; }
@property --dots { syntax: '<color>'; inherits: true; initial-value: rgba(47, 36, 28, .08); }
@property --grid { syntax: '<color>'; inherits: true; initial-value: rgba(47, 36, 28, .08); }
@property --board-glow { syntax: '<color>'; inherits: true; initial-value: rgba(255, 247, 232, .85); }
@property --veil { syntax: '<color>'; inherits: true; initial-value: rgba(255, 253, 248, .88); }
@property --hover-veil { syntax: '<color>'; inherits: true; initial-value: rgba(255, 253, 248, .3); }
.studio-page {
  transition: --paper .9s, --card .9s, --board .9s, --ink .9s, --ink-soft .9s, --ink-muted .9s, --line .9s, --dash .9s,
    --shadow .9s, --accent .9s, --green .9s, --dots .9s, --grid .9s, --board-glow .9s, --veil .9s, --hover-veil .9s;
}
.studio-page[data-mood='evening'] {
  color-scheme: dark;
  --paper: #1d1612;
  --card: #2a201a;
  --board: #33271f;
  --ink: #f1e6d6;
  --ink-soft: #d8c8b4;
  --ink-muted: #ad9a84;
  /* the site's own ink tints (styles.css), in cream for the dark paper */
  --ink-85: rgba(241, 230, 214, .85);
  --ink-75: rgba(241, 230, 214, .75);
  --ink-60: rgba(241, 230, 214, .6);
  --ink-50: rgba(241, 230, 214, .5);
  --ink-45: rgba(241, 230, 214, .45);
  --border-faint: rgba(241, 230, 214, .2);
  --card-lighter: #2F241E;
  --line: rgba(241, 230, 214, .18);
  --dash: rgba(241, 230, 214, .3);
  --shadow: rgba(0, 0, 0, .4);
  --accent: #e0875c;
  --green: #86b89c;
  --dots: rgba(241, 230, 214, .06);
  --grid: rgba(241, 230, 214, .06);
  --board-glow: rgba(255, 176, 102, .12);
  --veil: rgba(42, 32, 26, .9);
  --hover-veil: rgba(255, 240, 220, .08);
}
/* On the lighter terracotta, dark letters read better than cream ones. */
.studio-page[data-mood='evening'] .button {
  color: var(--paper);
}
/* The signature logo is drawn in brown ink; in the evening it is shown in cream. */
.studio-page .logo img {
  transition: filter .9s;
}
.studio-page[data-mood='evening'] .logo img {
  filter: brightness(0) invert(.92) sepia(.25);
}

/* ---------- 2. Base (what Tailwind's reset does not already cover) ---------- */

/* The homework page zeroes these in its base reset; without it the browser's own
   margins stretch the gap between the header and the title. */
.studio-page h1,
.studio-page h2,
.studio-page h3,
.studio-page p,
.studio-page figure {
  margin: 0;
}
.studio-page h1,
.studio-page h2 {
  font-weight: 700;
  line-height: 1.1;
}
.studio-page h1 {
  letter-spacing: -.03em; /* tight only at large sizes */
}
.studio-page h2 {
  letter-spacing: -.015em;
}
.studio-page a {
  color: inherit;
  text-decoration: none;
}
.studio-page button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.studio-page button:disabled {
  opacity: .45;
  cursor: default;
}
.studio-page button:focus-visible,
.studio-page canvas:focus-visible {
  outline: 2.5px solid var(--green);
  outline-offset: 4px;
}
/* Chinese text uses a Traditional Chinese font. */
.studio-page [lang='zh-Hant'] {
  font-family: 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans TC', sans-serif;
}

/* ---------- 3. Header ---------- */

.studio-page .site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 14px var(--pad);
  border-bottom: 1.5px solid var(--line);
}
.studio-page .logo {
  display: block;
  overflow: hidden;
  padding: 0;
}
.studio-page .logo img {
  display: block;
  width: auto;
  height: 46px;
  /* The signature draws itself from left to right when the page opens. */
  animation: draw-signature 2s cubic-bezier(.45, .08, .35, .95) both;
}
@keyframes draw-signature {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.studio-page .site-header nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.4vw, 30px);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.studio-page .site-header nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-soft);
}
.studio-page .site-header nav a:hover {
  color: var(--ink);
}
.studio-page .site-header nav a[aria-current] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 2.5px;
  text-underline-offset: 7px;
}
.studio-page .site-header nav .nav-cta {
  min-height: 40px;
  padding: 0 18px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
}
.studio-page .site-header nav .nav-cta:hover {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
}
/* On the contact page itself the pill stays its plain outlined self: no fill, no underline. */
.studio-page .site-header nav .nav-cta[aria-current] {
  background: none;
  color: var(--ink);
  text-decoration: none;
}

/* ---------- 4. Shared pieces the board uses ---------- */

/* Small capital label inside the card and the title block. */
.studio-page .label {
  color: var(--ink-muted);
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
/* The main button. */
.studio-page .button {
  display: inline-block;
  min-height: 46px;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff8ee;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.4;
  text-align: center;
  text-transform: uppercase;
  transition: transform .15s, box-shadow .15s;
}
.studio-page .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(47, 36, 28, .28);
}
/* Coloured pin at the top of the pinned card. */
.studio-page .pin {
  position: absolute;
  top: -9px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--pin, var(--accent));
  box-shadow: 0 2px 4px rgba(47, 36, 28, .35);
}

/* ---------- 5. The studio ---------- */

/* The page grid gives main the rest of the screen; main passes it on to the first screen. */
.studio-page main {
  display: grid;
  min-height: 0;
}
.studio-page .first-screen {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad) 22px;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}
.studio-page .intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px 40px;
  padding: 14px 0 16px; /* a little air between the navbar, the title and the board */
}
.studio-page .intro h1 {
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1;
}
.studio-page .intro p {
  max-width: 400px;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.5;
}
.studio-page .intro .hint {
  display: block;
  color: var(--accent);
  font-weight: 700;
}

/* The drawing board: grid paper with a soft light behind the room, which sits in the middle. */
.studio-page .board {
  position: relative;
  min-height: 460px;
  border: 1.5px solid var(--ink);
  background:
    radial-gradient(ellipse at 50% 56%, var(--board-glow), transparent 58%),
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 30px),
    var(--board);
  box-shadow: 6px 6px 0 var(--shadow);
}
/* Top-left corner of the board: its name and the Reset view button. */
.studio-page .board-top {
  position: absolute;
  top: 9px;
  left: 16px;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
}
/* The caption is the one deliberate zoom: Step inside, and back out. */
.studio-page .board-caption {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.studio-page .board-caption:disabled {
  cursor: default;
}
.studio-page .board-caption:not(:disabled):hover {
  color: var(--ink);
  text-decoration: underline 1.5px;
  text-underline-offset: 4px;
}
/* A small button that puts the view back as it opened. It is only live once the view has been
   moved in or turned. Its invisible edge makes it easier to press with a finger. */
.studio-page .reset-view {
  position: relative;
  min-height: 26px;
  padding: 0 12px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.studio-page .reset-view::after {
  content: '';
  position: absolute;
  inset: -10px -6px;
}
.studio-page .reset-view:not(:disabled):hover {
  background: var(--ink);
  color: var(--paper);
}
/* After moving in, the room reaches under the name, so it gets the same paper backing as the title block. */
.studio-page #stage.moved-in .board-caption {
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  background: var(--veil);
}
/* Message while the room loads. Once it is ready the text is kept for screen readers only. */
.studio-page #load-status {
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 4;
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 700;
}
.studio-page #stage.ready #load-status {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.studio-page #view {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.studio-page #poster,
.studio-page #view canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.studio-page #poster {
  padding: 3% 0;
  object-fit: contain;
}
.studio-page #view canvas {
  display: block;
  touch-action: pan-y; /* a finger drag scrolls the page */
}
.studio-page #stage.ready #poster {
  visibility: hidden;
}

/* Drafting furniture on the sheet: trim lines, dimension rails and register marks.
   It sits behind the room, so the marks live on the paper, never over the model. */
.studio-page .sheet-marks {
  position: absolute;
  inset: 12px;
  /* an svg keeps its own 300x150 unless told otherwise, even with every inset set */
  width: calc(100% - 24px);
  height: calc(100% - 24px);
  overflow: visible;
  color: var(--ink);
  pointer-events: none;
}
.studio-page .sheet-marks rect,
.studio-page .sheet-marks line {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}
.studio-page .sheet-marks .trim {
  opacity: .28;
}
.studio-page .sheet-marks .inner {
  opacity: .13;
  x: 7px;
  y: 7px;
  width: calc(100% - 14px);
  height: calc(100% - 14px);
}
.studio-page .sheet-marks .faint {
  opacity: .25;
}

/* Handwritten notes beside the room. Each one is a button that selects its miniature. */
.studio-page #project-notes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
/* The labels speak in the site's own voice, like the menu: they lead to the same pages. */
.studio-page #stage .note {
  position: absolute;
  min-height: 44px;
  padding: 4px 10px;
  color: var(--ink);
  font: 700 13px/1.3 'Space Grotesk', sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: auto;
}
.studio-page #stage .note:hover,
.studio-page #stage .note.hover {
  color: var(--accent);
}
.studio-page #stage .note[aria-pressed='true'] {
  color: var(--accent);
}
/* A filled dot marks the selected note, so it does not depend on colour alone. */
.studio-page #stage .note[aria-pressed='true']::before {
  content: '● ';
  font-size: .55em;
  vertical-align: middle;
}
.studio-page #stage.ready .note {
  animation: fade-in .5s ease-out backwards;
}
@keyframes fade-in {
  from { opacity: 0; }
}
/* Shortcuts: objects in the room that lead to another page. A shortcut's note shows
   only while its object is pointed at, or while the button has keyboard focus. */
.studio-page #stage .note.shortcut {
  display: inline-flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  /* A soft paper-coloured glow keeps the label readable over dark parts of the room. */
  text-shadow: 0 0 2px var(--card), 0 0 4px var(--card), 0 0 7px var(--card), 0 0 11px var(--card), 0 0 16px var(--card);
}
.studio-page #stage .note.shortcut.shown,
.studio-page #stage .note.shortcut:focus-visible {
  opacity: 1;
  pointer-events: auto;
}
/* After moving in on a miniature only its own note stays; the others return when the view steps back.
   A hidden note still appears when it gets keyboard focus. Phones keep all notes, as a row of buttons. */
.studio-page #stage .note {
  transition: opacity .2s;
}
@media (min-width: 761px) {
  /* Once the room is ready, the card does the talking: the notes show only on keyboard
     focus. Without 3D (no .ready) they stay, as the fallback. */
  .studio-page #stage.ready .note:not(.shortcut) {
    opacity: 0;
    pointer-events: none;
  }
  .studio-page #stage.ready .note:not(.shortcut):focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* The lamp speaks through its light: clicking it switches the mood, no label needed.
     Keyboard focus still shows the words. */
  .studio-page #stage.ready .note.shortcut.switch:not(:focus-visible) {
    opacity: 0;
    pointer-events: none;
  }
}
/* Without the 3D room there is nothing for a shortcut to point at; the menu has the same pages. */
.studio-page #stage:not(.ready) .shortcut {
  display: none;
}

/* Until the 3D room is ready (or if it cannot load) the notes are a row under the image. */
.studio-page #stage:not(.ready) #project-notes {
  inset: auto 310px 14px 290px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 18px;
}
.studio-page #stage:not(.ready) .note {
  position: static;
  transform: none;
}

/* Title block in the bottom-left corner, as on an architectural drawing. */
.studio-page .title-block {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 4;
  padding: 10px 14px 9px;
  border: 1.5px solid var(--ink);
  background: var(--veil);
}
.studio-page .title-block .names {
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}
.studio-page .title-block .label {
  color: var(--ink-soft);
}

/* Card pinned to the corner of the board with the selected project, clear of the lounge chair. */
.studio-page .project-card {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 4;
  width: 248px;
  padding: 20px 16px 16px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(1.2deg);
}
.studio-page .project-card h2 {
  margin: 4px 0 4px;
  font-size: 23px;
  overflow-wrap: anywhere;
}
/* A group's card has no summary; its button keeps the same space above it. */
.studio-page .project-card #project-summary[hidden] + .button {
  margin-top: 14px;
}
.studio-page .project-card #project-summary {
  margin: 10px 0 14px;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}
.studio-page .project-card .button {
  display: block;
  width: 100%;
}
.studio-page .project-card .button[hidden] {
  display: none;
}
/* The plaque's picture sits in an arched window on the card, like an architectural
   postcard; a touch of warmth settles any picture onto the paper. The index beside
   the kind says where this project stands in the series. */
.studio-page .project-card #project-image {
  display: block;
  width: 100%;
  height: 132px;
  margin: 2px 0 14px;
  border: 1.5px solid var(--ink);
  border-radius: 50% 50% 8px 8px / 40% 40% 8px 8px;
  object-fit: cover;
  background: var(--board);
  filter: saturate(.92) sepia(.08);
}
.studio-page .project-card #project-image[hidden] {
  display: none;
}
.studio-page .plaque-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.studio-page .plaque-index {
  opacity: .6;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
/* Pointing at the selected miniature raises the button: one more click opens the project. */
.studio-page .project-card.inviting .button {
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(47, 36, 28, .28);
}

/* ---------- 6. Small screens ---------- */

@media (max-width: 760px) {
  .studio-page .logo img {
    height: 38px;
  }
  /* Keep contact available alongside the four page links. */
  .studio-page .site-header nav {
    gap: 12px;
    font-size: 11.5px;
    letter-spacing: .1em;
  }
  .studio-page .site-header nav .nav-cta {
    display: flex;
    padding: 0 10px;
  }

  /* The page scrolls, with the board first and the project under it. */
  .studio-page .first-screen {
    display: block;
    min-height: 0;
  }
  .studio-page #load-status {
    position: static;
    display: block;
    margin: 10px 14px 0;
    text-align: center;
  }
  /* The title block moves to the end, so the project card stays in the first screen. */
  .studio-page .title-block {
    position: static;
    order: 1;
    margin: 14px 14px 0;
    text-align: center;
  }
  .studio-page .intro {
    display: block;
    padding-top: 10px;
  }
  .studio-page .intro p {
    margin-top: 8px;
  }
  .studio-page .board {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 14px;
  }
  .studio-page .board-caption {
    display: none; /* the title above already says it */
  }
  .studio-page .sheet-marks {
    display: none; /* the small board has no margins to decorate */
  }
  /* The room keeps its own shape, so it fills the width without empty bands. */
  .studio-page #view {
    position: relative;
    aspect-ratio: 1.15;
  }
  /* Notes become a row of handwritten buttons under the room, without arrows. */
  .studio-page #project-notes,
  .studio-page #stage:not(.ready) #project-notes {
    position: static;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 14px;
    padding: 0 10px;
  }
  .studio-page #stage .note {
    position: static;
    transform: none;
  }
  .studio-page #stage .note.shortcut {
    display: none; /* the menu leads to the same pages */
  }
  /* The lamp's switch has no page in the menu, so it stays in the row with the project notes. */
  .studio-page #stage.ready:not(.still) .note.shortcut.switch {
    display: inline-flex;
    opacity: 1;
    pointer-events: auto;
  }
  .studio-page .project-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: auto;
    margin: 8px 14px 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .studio-page,
  .studio-page * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 7. Inner pages: warm shell, the Work list, the footer ----------
   The homework's work-page look on the site's own markup (js/work.js renders it). */

/* Every page but the homepage has slightly warmer paper, closer to the board's tan;
   in the evening, the same dark paper as the homepage. */
.studio-page.inner { --paper: #F7ECDC; }
.studio-page.inner[data-mood="evening"] { --paper: #1D1612; }

/* The work GRID gets the homework's title treatment; the case-study pages below it
   keep the site's own layout, only on the warmer paper. */
.studio-page #grid-view .page-h1 {
  max-width: 900px;
  margin: 0 0 28px;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* Small capital line above a title, in the homework's terracotta mono. */
.studio-page .kicker {
  display: block;
  margin: 0 0 12px;
  color: var(--accent);
  font: 700 12px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: none;
}

/* The homework's warm accents replace the blue ones inside the shell.
   A themed case study keeps its own accent through --acc. */
.studio-page .accent { color: var(--accent); }
.studio-page .section-header .sub { color: var(--acc, var(--accent)); }
.studio-page .fact-card .tag { color: var(--accent); }
.studio-page .fact-card { box-shadow: 3px 3px 0 var(--shadow); }
/* Awards: the blue tags go terracotta, and literal dark texts take the palette's
   tints so they stay readable in the evening. */
.studio-page .award-featured .year-tag,
.studio-page .award-card .year-tag,
.studio-page .award-featured .org,
.studio-page .cert-card .source { color: var(--accent); }
.studio-page .award-featured .note { color: var(--ink-75); }
.studio-page .award-card .org { color: var(--ink-60); }

/* Contact: literal dark texts take the palette's tints, so they stay readable in the evening. */
.studio-page .postcard-top .note,
.studio-page .postcard-how { color: var(--ink-50); }
/* ...and its blues take the homework's terracotta. */
.studio-page .send-btn { background: var(--accent); color: #FFF8EE; }
/* The CV and portfolio downloads sit quietly: matching outlined pills, no fill. */
.studio-page .contact-downloads .btn-dark {
  padding: 9px 20px;
  font-size: 12px;
  background: none;
  color: var(--ink);
  border: 1.5px solid var(--ink-60);
}
.studio-page .contact-downloads .btn-dark:hover {
  background: var(--ink);
  color: var(--paper);
  transform: none;
  box-shadow: none;
}
.studio-page .contact-downloads .link-pill { border-color: var(--ink-60); }
.studio-page .contact-rows a:hover { color: var(--accent); }
.studio-page .contact-rows .elsewhere .sep { color: var(--accent); }
.studio-page .contact-rows .k { color: var(--accent); border-color: var(--dash); }
.studio-page .contact-rows .dashed-row { border-color: var(--dash); }

/* The sticky note takes the homework's butter yellow, and keeps its dark writing
   in the evening (its own text colours, not the cream the page would give it). */
.studio-page .about-sticky { background: #F2DFA7; }
.studio-page[data-mood='evening'] .about-sticky {
  --ink: #2F241C;
  --ink-85: rgba(47, 36, 28, .85);
  --ink-75: rgba(47, 36, 28, .75);
  --ink-60: rgba(47, 36, 28, .6);
  color: #5A4A3D;
}
/* The fact cards' pins take the homework's terracotta. */
.studio-page .fact-card .pin { background: var(--accent) !important; }
/* The tool chips are plain outlined pills, as in the homework — day and evening. */
.studio-page .tool-chip {
  background: none;
  color: var(--ink);
  border: 1.5px solid var(--ink-60);
  transform: none;
}

/* Outlined pills: the work page's filters. */
.studio-page .filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}
.studio-page .filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: background-color .9s, color .9s, border-color .9s;
}
.studio-page .filter-pill:hover,
.studio-page .filter-pill.active {
  background: var(--ink);
  color: var(--paper);
}

/* Buttons on the warm pages take the homework's terracotta. */
.studio-page .btn-dark {
  background: var(--accent);
  color: #FFF8EE;
  transition: background-color .9s, transform .15s, box-shadow .15s;
}
.studio-page .btn-dark:hover { box-shadow: 0 6px 0 rgba(47, 36, 28, .28); }

/* Footer on every page. */
.studio-page .site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  padding: 18px var(--pad);
  border-top: 1.5px solid var(--line);
  color: var(--ink-soft);
  font-size: 13px;
  transition: color .9s, border-color .9s;
}
.studio-page .site-footer p { margin: 0; }
.studio-page .site-footer a {
  display: inline-block;
  padding: 10px 2px;
  text-decoration: underline;
  text-decoration-color: var(--dash);
  text-underline-offset: 4px;
}
.studio-page .site-footer a:hover { color: var(--accent); }


/* ---------- 8. Awards: the homework's award board, cards and lightbox ---------- */

.studio-page main.page {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: 36px var(--pad) 96px;
}
.studio-page main.page > h1 {
  max-width: 900px;
  margin: 0 0 18px;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.studio-page .lede {
  max-width: 640px;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}
.studio-page .section-header h2 { font-size: 20px; }
.studio-page .section-header .label { color: var(--accent); }

/* A board with the main award on top and the others pinned in a row under it. */
.studio-page .award-board {
  margin: 34px 0 54px;
  padding: 46px clamp(16px, 3vw, 44px) 40px;
  border: 1.5px solid var(--ink);
  /* the same tan drawing board as the homepage, so the awards read as cards pinned to it */
  background:
    repeating-linear-gradient(0deg, var(--grid) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(90deg, var(--grid) 0 1px, transparent 1px 30px),
    var(--board);
  box-shadow: 6px 6px 0 var(--shadow);
}
.studio-page .award-featured {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 30px;
  align-items: center;
  max-width: 780px;
  margin: 0 auto 48px;
  padding: 30px 28px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 var(--shadow);
  transform: rotate(-.6deg);
  transition: background-color .9s, border-color .9s;
}
.studio-page .award-featured h2 {
  margin: 10px 0 8px;
  font-size: 27px;
}
.studio-page .award-featured .organization {
  margin-bottom: 8px;
  color: var(--accent);
  font-weight: 700;
}
.studio-page .award-featured p:last-child {
  color: var(--ink-soft);
}
.studio-page .award-featured .gallery-button img {
  height: 380px;
}
/* Three columns. A card with a certificate is two rows tall, and the cards without one
   stack beside it, so the row is one tidy block with no holes. */
.studio-page .award-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 26px 22px;
}
.studio-page .award-card.with-image {
  grid-row: span 2;
}
.studio-page .award-card {
  position: relative;
  padding: 18px 16px;
  background: var(--card);
  box-shadow: 0 8px 18px var(--shadow);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .2s, background-color .9s;
}
.studio-page .award-card:hover {
  transform: rotate(0deg) translateY(-4px);
}
.studio-page .award-card .gallery-button { margin-bottom: 12px; }
.studio-page .award-card .gallery-button img { height: 170px; }
.studio-page .award-card h3,
.studio-page .cert-card h3 {
  margin: 4px 0 6px;
  font-size: 18px;
  line-height: 1.25;
}
.studio-page .award-card p:last-child {
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 1.45;
}
.studio-page .cert-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.studio-page .cert-card {
  padding: 16px 18px 18px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  box-shadow: 4px 4px 0 var(--shadow);
  transition: background-color .9s, border-color .9s;
}
.studio-page .cert-card .gallery-button { margin-bottom: 14px; }
.studio-page .cert-card .gallery-button img { height: 170px; background: none; }
.studio-page .cert-card .label { color: var(--accent); }

/* A certificate image that opens larger when pressed. */
.studio-page .gallery-button {
  display: block;
  width: 100%;
  padding: 0;
  cursor: zoom-in;
}
.studio-page .gallery-button img {
  display: block;
  width: 100%;
  height: 260px;
  border: 1px solid var(--line);
  background: #EADFCD;
  object-fit: contain;
}
.studio-page[data-mood='evening'] .gallery-button img { background: var(--board); }

/* Outlined pill, used by the lightbox's Close. */
.studio-page .pill-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.studio-page .pill-link:hover {
  background: var(--ink);
  color: var(--paper);
}
/* Enlarged certificate pop-up. */
.studio-page .cert-lightbox {
  max-width: min(1200px, 94vw);
  max-height: 94vh;
  padding: 14px;
  border: 1.5px solid var(--ink);
  background: var(--card);
  color: var(--ink);
}
.studio-page .cert-lightbox::backdrop {
  background: rgba(47, 36, 28, .82);
}
.studio-page .cert-lightbox img {
  display: block;
  max-width: 100%;
  max-height: calc(94vh - 120px);
  margin: 0 auto;
}
.studio-page .cert-lightbox p {
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
}
.studio-page .cert-lightbox .pill-link {
  display: flex;
  margin: 0 0 10px auto;
}

@media (max-width: 900px) {
  .studio-page .award-row,
  .studio-page .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .studio-page .award-row,
  .studio-page .cert-grid { grid-template-columns: 1fr; }
  .studio-page .award-featured { grid-template-columns: 1fr; }
}

/* A deliberate second row keeps all five destinations visible on narrow phones. */
@media (max-width: 480px) {
  .studio-page .site-header { flex-wrap: wrap; gap: 4px; padding: 10px 20px; }
  .studio-page .site-header nav { width: 100%; justify-content: space-between; gap: 7px; font-size: 10.5px; letter-spacing: .06em; }
  .studio-page .site-header nav .nav-cta { padding: 0 8px; white-space: nowrap; }
}