/* Portfolio and Koda content. Header/footer and core typography come from landing.css. */
.showcase-page .work-page { padding-top: clamp(7rem, 10vw, 10rem); padding-bottom: var(--space-3xl); }
.showcase-page .work-intro { margin-bottom: var(--space-3xl); }
.showcase-page .showcase-intro { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(2rem, 4vw, 5rem); }
.showcase-page .section-title { text-align: left; line-height: 1.14; }
.showcase-page h1.section-title { font-size: clamp(2.8rem, 5.5vw, 5.5rem); margin: 1rem 0 1.5rem; }
.showcase-page h2.section-title { font-size: clamp(1.8rem, 3vw, 2.75rem); margin: .75rem 0 1.5rem; }
.showcase-page .eyebrow { color: var(--text-secondary); font-size: .75rem; line-height: 1.6; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.showcase-page .work-intro p:not(.eyebrow) { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.8; color: var(--text-secondary); max-width: 48ch; }
.showcase-page .showcase-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.75rem; }
.showcase-page .showcase-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .75rem; min-height: 48px; padding: .85rem 1.3rem; font-size: .95rem; text-decoration: none; }
.showcase-page .showcase-feature { display: block; border: 1px solid var(--border); border-radius: 1.5rem; overflow: hidden; box-shadow: var(--surface-relief); background: var(--bg-card); color: var(--text-primary); text-decoration: none; transform: rotate(2deg); transition: transform .25s ease; }
.showcase-page .showcase-feature:hover { transform: rotate(0deg) translateY(-4px); }
.showcase-page .showcase-feature img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.showcase-page .feature-caption { padding: 1.4rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; }
.showcase-page .feature-caption strong { display: block; font-size: 1.2rem; margin-top: .3rem; }
.showcase-page .feature-caption > span:last-child { font-size: 2rem; color: var(--accent-cyan); }
.showcase-page .showcase-section-heading { margin-bottom: 2rem; scroll-margin-top: 7rem; }
.showcase-page .work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.5vw, 2rem); }
.showcase-page .work-card { position: relative; display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 1.5rem; background: var(--bg-card); box-shadow: var(--surface-relief); backdrop-filter: blur(12px); }
.showcase-page .work-card::before { content: ''; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--prism-gradient-122); background-size: var(--prism-size); pointer-events: none; }
.showcase-page .work-card > img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: cover; }
.showcase-page .work-card__body { padding: clamp(1.3rem, 3vw, 2.5rem); display: flex; flex-direction: column; flex: 1; }
.showcase-page .work-card h2 { font-size: clamp(1.5rem, 2vw, 2rem); line-height: 1.25; margin: .8rem 0 1rem; }
.showcase-page .work-card p, .showcase-page .work-history p { color: var(--text-secondary); line-height: 1.8; }
.showcase-page .work-card details { margin: 1rem 0; border-top: 1px solid var(--border); }
.showcase-page summary { cursor: pointer; padding: 1rem 0; font-weight: 600; }
.showcase-page .work-link { align-self: flex-start; display: inline-block; color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--accent-cyan); padding: .65rem 0; margin-top: auto; font-weight: 600; }
.showcase-page .work-link:hover { border-bottom-color: var(--accent-purple); }
.showcase-page .work-history { margin-top: var(--space-3xl); }
.showcase-page .project-history { border: 1px solid var(--border); border-radius: 1rem; padding: .4rem 1.5rem; background: var(--bg-card); margin: 1rem 0; scroll-margin-top: 7rem; }
.showcase-page .project-history > summary { font-size: 1.15rem; }
.showcase-page .project-history > div { padding-bottom: 1.5rem; }
.showcase-page .project-history img { max-width: 100%; height: auto; border-radius: .75rem; }
.showcase-page .project-history picture { display: block; }
.showcase-page .project-history .screenshots, .showcase-page .project-history .photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.showcase-page .project-history p { margin-block: 1rem; }
.showcase-page .work-history a { color: var(--text-primary); text-underline-offset: .25em; }
.showcase-page .koda-intro > img { width: min(100%, 360px); height: auto; justify-self: center; filter: drop-shadow(0 18px 35px rgb(104 81 198 / .23)); }
.showcase-page .koda-intro .btn { margin-top: 1.5rem; }
.showcase-page .source-note { font-size: .85rem; margin-top: 2rem; }
.showcase-page .work-symbol { height: 9rem; display: flex; align-items: center; gap: 1.5rem; padding: 2rem 2.5rem; background: var(--prism-gradient-122); background-size: var(--prism-size); color: #172532; }
.showcase-page .work-symbol svg { width: 4rem; height: 4rem; flex-shrink: 0; }
.showcase-page .work-symbol span { font-family: 'Caveat', cursive; font-size: clamp(1.9rem, 3vw, 2.7rem); font-weight: 700; }
@media (max-width: 800px) {
  .showcase-page .showcase-intro { grid-template-columns: 1fr; }
  .showcase-page .showcase-feature { max-width: 600px; transform: none; }
  .showcase-page .koda-intro { grid-template-columns: 1.3fr 1fr; gap: 1rem; }
}
@media (max-width: 600px) {
  .showcase-page .work-grid, .showcase-page .koda-intro, .showcase-page .project-history .screenshots, .showcase-page .project-history .photos { grid-template-columns: 1fr; }
  .showcase-page .koda-intro > img { width: min(65%, 250px); }
  .showcase-page .showcase-actions .btn { flex: 1 1 auto; }
  .showcase-page .work-symbol { padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .showcase-page .section-title-text { animation: none; }
  .showcase-page .showcase-feature { transform: none; transition: none; }
}
/* The same rounded, relieved button treatment as the restored landing controls. */
.showcase-page .work-page .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .9rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: var(--bg-card);
  box-shadow: var(--surface-relief);
  color: var(--text-primary);
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
}
.showcase-page .work-page .btn-primary { border-color: color-mix(in oklch, var(--accent-cyan) 45%, var(--border)); }
.showcase-page .work-page .btn:hover { border-color: var(--accent-cyan); }
.showcase-page .work-page :is(a, summary):focus-visible { outline: 3px solid var(--accent-cyan); outline-offset: 5px; }
@media (max-width: 800px) {
  /* Mobile appearance/share controls occupy a second row below the menu. */
  .showcase-page .work-page { padding-top: 10.5rem; }
}
/* Project motifs and controls share precise optical rails. */
.showcase-page .work-card .eyebrow { display: flex; align-items: center; gap: .7rem; min-height: 2rem; }
.showcase-page .work-card .eyebrow svg { width: 1.8rem; height: 1.8rem; flex-shrink: 0; color: var(--letter-accent); }
.showcase-page .work-symbol { height: auto; aspect-ratio: 16 / 9; background: var(--bg-card); color: var(--text-primary); border-bottom: 1px solid var(--border); }
.showcase-page .work-symbol > svg { width: clamp(4rem, 7vw, 6rem); height: clamp(4rem, 7vw, 6rem); color: var(--letter-accent); filter: drop-shadow(1px 3px 0 var(--letter-side)); }
.showcase-page .work-symbol span { font-family: inherit; font-size: clamp(1.2rem, 2vw, 1.8rem); font-weight: 750; letter-spacing: -.025em; line-height: 1.35; }
.showcase-page .work-card::before { background: var(--letter-accent); }
.showcase-page .work-card h2 { min-height: 2.5em; }
.showcase-page .work-card__body > p:not(.eyebrow) { flex: 1; }
.showcase-page .showcase-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); align-items: stretch; max-width: 55rem; }
.showcase-page .intro-copy .showcase-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.showcase-page .work-page .btn, .showcase-page .work-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: .65rem; line-height: 1.5; }
.showcase-page .work-page :is(.btn, .work-link) > svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }
.showcase-page .work-link { min-height: 44px; }
.showcase-page .showcase-feature { transform: none; }
.showcase-page .koda-intro .btn { min-width: 13rem; }
@media (max-width: 600px) {
  .showcase-page .intro-copy .showcase-actions { grid-template-columns: 1fr; }
  .showcase-page .work-card h2 { min-height: 0; }
}

/* ── Refinement layer (Sep 29 review). Kept in CSS because portfolio/koda HTML is generated. */

/* Section rhythm: a heading block that follows prose always gets a full section gap. */
.showcase-page .work-history + .showcase-section-heading { margin-top: var(--space-3xl); }
/* Eyebrows pick up a muted tint of the page accent so each section reads as one family. */
.showcase-page :is(.showcase-intro, .showcase-section-heading, .work-history) > * > .eyebrow,
.showcase-page :is(.showcase-section-heading, .work-history) > .eyebrow {
  color: color-mix(in srgb, var(--letter-accent) 55%, var(--text-secondary));
}

/* Symbol tiles are art panels, not empty placeholders: a lit corner, a fine dot field
   that fades before the edges, and the motif mounted on a relieved plate. */
.showcase-page .work-symbol {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  background:
    radial-gradient(110% 90% at 12% 115%, color-mix(in srgb, var(--letter-accent) 20%, transparent), transparent 60%),
    radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--letter-face) 16%, transparent), transparent 55%),
    var(--bg-card);
}
.showcase-page .work-symbol::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--text-primary) 18%, transparent) 1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: center;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at center, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 70% 75% at center, #000 25%, transparent 78%);
}
.showcase-page .work-symbol > svg {
  width: clamp(5rem, 8vw, 6.75rem);
  height: clamp(5rem, 8vw, 6.75rem);
  padding: clamp(.8rem, 1.4vw, 1.1rem);
  border: 1px solid color-mix(in srgb, var(--letter-accent) 38%, var(--border));
  border-radius: 1.4rem;
  background: color-mix(in srgb, var(--letter-accent) 9%, var(--bg-card));
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 14px 32px -18px var(--letter-accent);
  filter: none;
}
.showcase-page .work-symbol span { max-width: 11ch; text-wrap: balance; color: var(--text-primary); }

/* Cards: no reserved title height (it left a dead band under one-line titles), a
   two-tone top trim, and a quiet lift that also answers keyboard focus. */
.showcase-page .work-card h2 { min-height: 0; margin-bottom: .75rem; }
.showcase-page .work-card::before { z-index: 1; height: 3px; background: linear-gradient(90deg, var(--letter-accent), var(--letter-face)); }
.showcase-page .work-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.showcase-page .work-card:is(:hover, :focus-within) {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--letter-accent) 40%, var(--border));
}
.showcase-page .work-card > img { border-bottom: 1px solid var(--border); }

/* Disclosures: one chevron language for card notes and the project archive. */
.showcase-page summary { list-style: none; display: flex; align-items: center; gap: .7rem; }
.showcase-page summary::-webkit-details-marker { display: none; }
.showcase-page summary::before {
  content: '';
  flex-shrink: 0;
  width: .5em;
  height: .5em;
  margin-inline: .1em .15em;
  border-right: 2px solid var(--letter-accent);
  border-bottom: 2px solid var(--letter-accent);
  transform: rotate(-45deg);
  transition: transform .2s ease;
}
.showcase-page details[open] > summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.showcase-page summary:hover { color: var(--letter-accent); }

/* Archive rows: accent rail and tinted surface once open, so an expanded project is
   easy to keep track of while scrolling through its screenshots. */
.showcase-page .project-history { padding: 0 1.5rem; transition: border-color .2s ease, box-shadow .2s ease; }
.showcase-page .project-history > summary { min-height: 4.25rem; padding-block: 1.1rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 650; }
.showcase-page .project-history:hover { border-color: color-mix(in srgb, var(--letter-accent) 30%, var(--border)); }
.showcase-page .project-history[open] {
  border-color: color-mix(in srgb, var(--letter-accent) 45%, var(--border));
  box-shadow: inset 3px 0 0 var(--letter-accent), var(--surface-relief);
  background: color-mix(in srgb, var(--letter-accent) 4%, var(--bg-card));
}
.showcase-page .project-history[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: .5rem; }
.showcase-page .project-history :is(img, picture img) { border: 1px solid var(--border); }

/* The archive link closes the page as a proper secondary control. */
.showcase-page .work-history > p > a[href="/portfolio/2016/"] {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 48px;
  margin-top: 1rem;
  padding: .75rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 1.15rem;
  background: var(--bg-card);
  box-shadow: var(--surface-relief);
  font-weight: 600;
  text-decoration: none;
}
.showcase-page .work-history > p > a[href="/portfolio/2016/"]::after { content: '→'; color: var(--letter-accent); }
.showcase-page .work-history > p > a[href="/portfolio/2016/"]:hover { border-color: var(--letter-accent); }

@media (prefers-reduced-motion: reduce) {
  .showcase-page :is(.work-card, .project-history),
  .showcase-page summary::before { transition: none; }
  .showcase-page .work-card:is(:hover, :focus-within) { transform: none; }
}
@media (forced-colors: active) {
  .showcase-page summary::before { border-color: CanvasText; }
  .showcase-page .work-symbol::before { display: none; }
}
/* Link rules follow the page accent rather than a fixed cyan. */
.showcase-page .work-link { border-bottom-color: var(--letter-accent); }
.showcase-page .work-link:hover { border-bottom-color: var(--letter-face); }

/* ── Portfolio hue family. Tangerine stays the signature (headline emphasis, first
   section); cards and later sections draw from an aligned family, analogous gold and
   apricot plus complementary teal and sky, so orange accents instead of saturating. */
html[data-lettering="folio"] {
  --folio-tangerine: #ffa646; --folio-gold: #ffd166; --folio-teal: #3fd9c4; --folio-sky: #6cc8ff; --folio-apricot: #ffbf8a;
}
html[data-theme="light"][data-lettering="folio"] {
  --folio-tangerine: #b45500; --folio-gold: #8a6400; --folio-teal: #00766a; --folio-sky: #0065a8; --folio-apricot: #9a5a1c;
}
html[data-lettering="folio"] .work-grid > .work-card:nth-child(4n + 1) { --letter-accent: var(--folio-tangerine); }
html[data-lettering="folio"] .work-grid > .work-card:nth-child(4n + 2) { --letter-accent: var(--folio-teal); }
html[data-lettering="folio"] .work-grid > .work-card:nth-child(4n + 3) { --letter-accent: var(--folio-gold); }
html[data-lettering="folio"] .work-grid > .work-card:nth-child(4n + 4) { --letter-accent: var(--folio-sky); }
html[data-lettering="folio"] .work-card .work-card__body .eyebrow { color: color-mix(in srgb, var(--letter-accent) 55%, var(--text-secondary)); }
/* Later sections step through the family; the archive reads cool against the warm hero. */
html[data-lettering="folio"] .work-history { --letter-accent: var(--folio-teal); --letter-accent-edge: color-mix(in srgb, var(--folio-teal) 55%, #fff); }