/* AP Renovation. The ground colour is written live by world.js (the signature
   move), so no copy rule sets a literal colour: everything reads the tokens. */
:root {
  --sc-canvas:      #120E0A;
  --sc-surface:     #1D1711;
  --sc-ink:         #F1E8D6;
  --sc-ink-soft:    #BDB09A;
  --sc-accent:      #E08A4A;
  --sc-accent-ink:  #120E0A;
  --scrim:          8, 5, 3;
  --sc-font-display: "EB Garamond", "Times New Roman", serif;
  --sc-font-text:    "Manrope", system-ui, sans-serif;
  --sc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
  --chrome-h: 4.25rem;
  --hair: color-mix(in oklab, var(--sc-ink) 22%, transparent);
  --p: 0;
}

html { scroll-behavior: auto; }
body { background: var(--sc-canvas); font-family: var(--sc-font-text); font-weight: 400; }

.skip { position: fixed; left: 1rem; top: -4rem; z-index: 100; padding: .6rem 1rem; background: var(--sc-accent); color: var(--sc-accent-ink); font-weight: 600; }
.skip:focus { top: 1rem; }

/* -------------------------------------------------------------- chrome -- */
.chrome {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  height: var(--chrome-h); padding-inline: var(--sc-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  pointer-events: none;
}
.chrome > * { pointer-events: auto; }
.chrome__r { display: flex; align-items: center; gap: .9rem; }
.mark {
  display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--sc-ink);
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3;
}
.mark i { width: 1.35rem; height: 1.35rem; border: 1px solid var(--sc-ink); position: relative; flex: none; }
.mark i::after { content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; top: 5px; border: 1px solid var(--sc-accent); border-bottom: 0; }
.mark:hover { color: var(--sc-accent); }
.lang { display: flex; border: 1px solid var(--hair); }
.lang button {
  all: unset; box-sizing: border-box; cursor: pointer; min-width: 2.4rem; min-height: 2.4rem; display: grid; place-items: center;
  font-family: var(--sc-font-mono); font-size: .72rem; letter-spacing: .08em; color: var(--sc-ink-soft);
}
.lang button[aria-pressed="true"] { color: var(--sc-accent-ink); background: var(--sc-ink); }
.lang button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3rem; padding: .55rem 1.5rem; border: 0; border-radius: 0;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-family: var(--sc-font-text); font-weight: 600; font-size: .98rem; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out);
}
.btn:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: color-mix(in oklab, var(--sc-accent) 80%, #fff); } }
.btn--sm { min-height: 2.4rem; padding: .35rem 1rem; font-size: .84rem; }
.btn--lg { min-height: 3.5rem; padding: .7rem 1.8rem; font-size: 1.05rem; }

/* --------------------------------------------------------------- ruler --
   The nav is a drawn dimension line: ticks, a moving mark, the live ground tone. */
.ruler {
  position: fixed; z-index: var(--sc-z-chrome);
  right: clamp(.75rem, 1.8vw, 1.6rem); top: 50%; translate: 0 -50%;
  height: min(60vh, 34rem); width: 9.5rem; pointer-events: none;
}
.ruler__scale {
  position: absolute; right: 0; top: 0; bottom: 0; width: 11px;
  border-right: 1px solid var(--sc-ink-soft);
  background:
    repeating-linear-gradient(to bottom, var(--sc-ink-soft) 0 1px, transparent 1px 2.2%) right / 5px 100% no-repeat,
    repeating-linear-gradient(to bottom, var(--sc-ink-soft) 0 1px, transparent 1px 11%) right / 11px 100% no-repeat;
  opacity: .7;
}
.ruler ol { list-style: none; margin: 0; padding: 0; }
.ruler li { position: absolute; right: 18px; top: var(--y); translate: 0 -50%; }
.ruler button {
  all: unset; box-sizing: border-box; cursor: pointer; pointer-events: auto;
  display: block; padding: .5rem .2rem; min-height: 2.2rem; text-align: right;
  font-family: var(--sc-font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sc-ink-soft); opacity: .55; white-space: nowrap;
  transition: color 140ms var(--sc-ease-out), opacity 140ms var(--sc-ease-out);
}
.ruler button:hover { opacity: 1; color: var(--sc-ink); }
.ruler button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; opacity: 1; }
.ruler button[aria-current="true"] { color: var(--sc-ink); opacity: 1; }
.ruler__mark {
  position: absolute; right: 2px; top: calc(var(--p) * 100%); translate: 0 -50%;
  width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid var(--sc-accent);
  right: 12px;
}
.ruler__tone {
  position: absolute; right: 0; bottom: -2.6rem; margin: 0; display: flex; align-items: center; gap: .5rem;
  font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .08em; color: var(--sc-ink-soft);
}
.ruler__tone b { width: .8rem; height: .8rem; border: 1px solid var(--sc-ink-soft); background: var(--tone, #888); }

/* ---------------------------------------------------------------- copy -- */
#world { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-sc-segment] { pointer-events: none; }

.sc-copy { max-width: min(40rem, 62vw); isolation: isolate; }
.sc-copy::before {
  content: ""; position: absolute; inset: -4rem -5rem -3rem -4rem; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(var(--scrim), .88), rgba(var(--scrim), .55) 65%, transparent);
}
.sc-copy--trail::before { inset: -4rem -4rem -3rem -5rem; }
.sc-copy--lead { bottom: clamp(2.5rem, 11vh, 8rem); }
.sc-copy--trail { bottom: clamp(2.5rem, 11vh, 8rem); right: calc(var(--sc-gutter) + 9.5rem); }

h1, h2 { font-family: var(--sc-font-display); font-weight: 400; margin: 0; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 6rem); line-height: .98; }
h2 { font-size: clamp(2rem, 4.2vw, 3.8rem); line-height: 1.02; }
.lede { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.55; color: var(--sc-ink); margin: 1.4rem 0 1.8rem; max-width: 30rem; }
.body { font-size: clamp(.98rem, 1.25vw, 1.1rem); line-height: 1.6; margin: 1.2rem 0 0; max-width: 30rem; }
.soft { color: var(--sc-ink-soft); }
.small { font-size: .88rem; line-height: 1.55; }
.tag, .note {
  font-family: var(--sc-font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-ink-soft); margin: 0 0 1.1rem;
}
.note { margin: 1.4rem 0 0; }
.big { font-family: var(--sc-font-display); font-style: italic; font-size: clamp(3.4rem, 9vw, 8.5rem); line-height: .9; margin: 0; }
.c-after { text-align: right; }
.c-after .body { margin-left: auto; }

/* line reveal, driven by --lp which world.js sets from the block's own window */
.ln {
  display: block;
  opacity: clamp(0, calc((var(--lp, 1) - var(--s, 0) * .6) * 3.2), 1);
  translate: 0 calc((1 - clamp(0, calc((var(--lp, 1) - var(--s, 0) * .6) * 3.2), 1)) * .7em);
}

.c-hero { max-width: min(40rem, 80vw); }
.c-hero .lede { color: var(--sc-ink); }

.facts { margin: 1.8rem 0 0; display: grid; gap: .9rem; max-width: 33rem; }
.facts > div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding-top: .8rem; border-top: 1px solid var(--hair); }
.facts dt { font-family: var(--sc-font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sc-ink-soft); padding-top: .2rem; }
.facts dd { margin: 0; font-size: 1.02rem; line-height: 1.5; }

.c-work { max-width: min(62rem, 78vw); }
.plates { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.plates li { display: grid; gap: .5rem; align-content: start; }
.plates svg { width: 100%; height: auto; aspect-ratio: 3 / 2; border: 1px solid var(--hair); background: color-mix(in oklab, var(--sc-surface) 70%, transparent); padding: .8rem; fill: none; stroke: var(--sc-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plates svg path, .plates svg circle { vector-effect: non-scaling-stroke; }
.plates svg .d { stroke: var(--sc-accent); }
.plates b { font-family: var(--sc-font-display); font-weight: 500; font-size: 1.35rem; line-height: 1.15; margin-top: .4rem; }
.plates span:not(.ln) { }
.plates li > span { font-size: .93rem; line-height: 1.5; color: var(--sc-ink-soft); }

.c-trust { max-width: min(36rem, 58vw); }
.c-trust .body { margin-left: auto; text-align: left; }

.c-close { max-width: min(34rem, 92vw); bottom: clamp(1.5rem, 7vh, 5rem); }
.c-close::before { inset: -4rem -6rem -3rem -5rem; background: radial-gradient(closest-side, color-mix(in oklab, var(--sc-canvas) 92%, #000), color-mix(in oklab, var(--sc-canvas) 70%, transparent) 70%, transparent); }
.c-close h2 { margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.chips button {
  all: unset; box-sizing: border-box; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center;
  padding: .45rem .95rem; border: 1px solid var(--hair); font-size: .88rem; line-height: 1.3; color: var(--sc-ink);
  transition: background-color 140ms var(--sc-ease-out), border-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.chips button:hover { border-color: var(--sc-ink); }
.chips button:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
.chips button[aria-pressed="true"] { background: var(--sc-ink); color: var(--sc-accent-ink); border-color: var(--sc-ink); }
.contact { margin-top: 1.2rem; }
.contact a { color: var(--sc-ink); }

[data-sc-copy] a, [data-sc-copy] button { pointer-events: auto; }

/* --------------------------------------------------------------- phone -- */
@media (max-width: 860px) {
  .ruler { display: none; }
  .sc-copy--trail { right: var(--sc-gutter); }
  .mark span { max-width: 9.5rem; font-size: .62rem; }
  .btn--chrome { display: none; }
  .sc-copy { max-width: none; inset-inline: var(--sc-gutter); }
  .sc-copy::before { inset: -3rem -2rem -2rem -2rem; }
  .c-after, .c-trust { text-align: left; }
  .c-after .body, .c-trust .body { margin-left: 0; }
  .sc-copy--lead, .sc-copy--trail { bottom: clamp(1.5rem, 8vh, 4rem); }
  h1 { font-size: clamp(2.3rem, 11vw, 3.4rem); }
  h2 { font-size: clamp(1.8rem, 8vw, 2.6rem); }
  .big { font-size: clamp(3rem, 16vw, 5rem); }
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
  .plates { grid-template-columns: 1fr; gap: .9rem; margin-top: 1.1rem; }
  .plates li { grid-template-columns: 6.2rem 1fr; column-gap: .9rem; row-gap: .1rem; }
  .plates svg { grid-row: 1 / span 2; padding: .35rem; }
  .plates b { margin-top: 0; font-size: 1.1rem; }
  .c-work { max-width: none; }
  .chips button { font-size: .82rem; min-height: 2.75rem; }
}
@media (max-width: 860px) and (max-height: 700px) { .c-close h2 { font-size: 1.6rem; } .chips { margin: .6rem 0 1rem; } }
@media (prefers-reduced-motion: reduce) { .ln { translate: none; } }

/* client photos */
.plates li > img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; border: 1px solid var(--hair); filter: saturate(.85) sepia(.14) contrast(1.04); }
.ph-badge {
  position: fixed; z-index: var(--sc-z-chrome); left: var(--sc-gutter); bottom: .7rem; margin: 0; pointer-events: none;
  font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft);
}
@media (max-width: 860px) { .plates li > img { grid-row: 1 / span 2; aspect-ratio: 1; height: 100%; } .ph-badge { display: none; } }

/* palette switcher: a review aid, remove once a palette is chosen */
.themes {
  position: fixed; z-index: var(--sc-z-chrome); right: var(--sc-gutter); bottom: .7rem; margin: 0; display: flex; gap: 1rem; align-items: baseline;
  font-family: var(--sc-font-mono); font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sc-ink-soft);
}
.themes a { color: inherit; text-decoration: none; padding: .3rem 0; border-bottom: 1px solid transparent; }
.themes a[aria-current="page"] { color: var(--sc-ink); border-bottom-color: var(--sc-accent); }
.themes a:hover { color: var(--sc-ink); }
.themes a:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }
@media (max-width: 860px) { .themes { right: auto; left: 50%; transform: translateX(-50%); bottom: .5rem; gap: .8rem; } }