/* THE ARCHITECT — SOOP's identity, quoted inside ours.
   This section deliberately does NOT use this site's palette or typefaces.
   It is their exact ground: PURE COOL WHITE #FFFFFF against the page's warm
   ivory #FAF8F4, #1E2025 blue-black ink, #363636 body, Assistant (their humanist
   sans), mixed case, 1.8 leading, metadata as bare unlabelled lines. The single
   accent is #435C4C — the deep forest green defined but never used in their own
   theme CSS, and the meaning of their name (SOOP = 숲 = forest).
   The tonal shift is small by design; the typeface, the green and the black
   SO/OP mark carry the change. Hairlines frame it as an inset plate.
   Do not "harmonise" this section with the rest of the page. */

@font-face{
  font-family:Assistant;
  src:url(/assets/fonts/assistant.woff2)format("woff2");
  font-weight:200 800;font-style:normal;font-display:swap;
}

.architect{
  --ink:#1E2025;        /* their primary */
  --body:#363636;       /* their body copy */
  --muted:#505562;      /* their nav grey, the only cool-tinted value they use */
  --forest:#435C4C;     /* SOOP = 숲 = forest */
  background:#fff;color:var(--body);
  font-family:Assistant,ui-sans-serif,system-ui,sans-serif;
  padding:var(--sp-xl) var(--gutter) var(--sp-lg);
  border-top:1px solid rgba(30,32,37,.14);
  border-bottom:1px solid rgba(30,32,37,.14);
}
.architect *{max-width:none}
.architect p{line-height:1.8}          /* their leading, exactly */
.architect__inner{max-width:64rem;margin:0 auto}

/* -- their wordmark, rebuilt the way they build it: Arial Black crushed by
      -0.15em tracking and 0.65 line-height until SO / OP stack into a square.
      No image asset — it is pure type, as on their own site. -- */
/* NOTE: must out-specify `.architect p{line-height:1.8}` above, or the two
   lines render at 1.8 leading and the stack falls apart. Hence p.soop-mark. */
p.soop-mark{
  font-family:"Arial Black","Arial Bold",Arial,sans-serif;font-weight:900;
  font-size:clamp(3.25rem,2rem + 5vw,5.5rem);
  letter-spacing:-.15em;line-height:.65;
  color:var(--ink);margin:0 0 calc(var(--sp-md) + .35em);
}
/* Explicit two-line stack rather than relying on a width heuristic to wrap.
   The mark is aria-hidden; the accessible name comes from the sr-only h2. */
.soop-mark span{display:block}
.architect__eyebrow{
  font-family:Assistant,sans-serif;font-weight:600;font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.18em;color:var(--forest);
  margin:0 0 var(--sp-lg)}
.architect__tagline{
  font-weight:600;font-size:.8125rem;letter-spacing:.02em;color:var(--ink);
  text-transform:uppercase;margin:0 0 var(--sp-lg)}

/* -- the forest line: their own sentence, given the weight it deserves -- */
.architect__quote{margin:0 0 var(--sp-lg);padding-left:var(--sp-md);
  border-left:2px solid var(--forest)}
.architect__quote p{font-size:clamp(1.0625rem,.9rem + .9vw,1.5rem);
  font-weight:400;line-height:1.55;color:var(--ink);max-width:34ch}
.architect__quote cite{display:block;margin-top:var(--sp-sm);font-style:normal;
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}

/* -- the three-word design vision, in her words -- */
.vision{display:grid;gap:var(--sp-md);margin:var(--sp-lg) 0;
  border-top:1px solid #E4E4E4;padding-top:var(--sp-md)}
.vision__item dt{font-weight:600;font-size:1.0625rem;color:var(--ink);margin-bottom:.35em}
.vision__item dd{margin:0;font-size:.9375rem;line-height:1.7;color:var(--body)}
@media (min-width:48rem){ .vision{grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)} }

/* -- their account of the site, in their words --
   Two fragments quoted from SOOP's own project page. The second is cut
   mid-sentence on purpose: their clause opens with a dwelling classification
   this site does not publish, so the quotation starts after it. The quoted
   words are exact and contiguous; only the head of the sentence is dropped. */
.architect__site{border-top:1px solid #E4E4E4;padding-top:var(--sp-md);
  margin-top:var(--sp-lg)}
.architect__site p{font-size:.9375rem;max-width:64ch}
.architect__site p + p{margin-top:1.1em}

/* -- principal -- */
.architect__bio{border-top:1px solid #E4E4E4;padding-top:var(--sp-md);
  display:grid;gap:var(--sp-md)}

/* Portrait heads the narrow column. Capped on small screens, where the bio grid
   collapses to one column and an uncapped 3:4 image would run full width and
   outweigh the on-site hero — which is this page's lead image and stays that way. */
.architect__portrait{margin:0 0 var(--sp-md);max-width:14rem}
.architect__portrait img{display:block;width:100%;height:auto;background:#F2F2F2}
.architect__portrait figcaption{margin-top:.6em;font-size:.6875rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
@media (min-width:48rem){ .architect__portrait{max-width:none} }

.architect__name{font-size:1.375rem;font-weight:600;color:var(--ink);margin:0}
.architect__role{font-size:.9375rem;color:var(--muted);margin:.15em 0 0}
.architect__bio p{font-size:.9375rem;max-width:64ch}
.architect__bio p + p{margin-top:1.1em}
@media (min-width:48rem){
  .architect__bio{grid-template-columns:minmax(12rem,18rem) minmax(0,1fr);gap:var(--sp-lg)}
}

.architect__links{margin-top:var(--sp-lg);border-top:1px solid #E4E4E4;
  padding-top:var(--sp-md);display:flex;flex-wrap:wrap;gap:var(--sp-md)}
.architect a{color:var(--forest);text-decoration-color:rgba(67,92,76,.35);
  font-size:.9375rem;text-underline-offset:.25em}
.architect a:hover,.architect a:focus-visible{color:var(--ink);text-decoration-color:var(--forest)}
.architect :focus-visible{outline-color:var(--forest)}

/* -- render vs. built --
   Pairs are capped at 26rem a side on purpose. SOOP's renders exist only at
   900x506, which the upscale guard caps at the 800x450 card-sm profile; 26rem
   is ~416px, so at 2x the render is asked for ~832 device pixels and is not
   being stretched past what it holds. Do not widen this without larger source
   files — the photograph beside it is 1600px and will make any softness in the
   render obvious the moment the pair gets bigger. */
.rr{border-top:1px solid #E4E4E4;padding-top:var(--sp-md);margin-top:var(--sp-lg)}
.rr__h{font-size:1.375rem;font-weight:600;color:var(--ink);margin:0 0 .4em}
.rr__lede{font-size:.9375rem;max-width:60ch;margin:0 0 var(--sp-lg)}
.rr__pair{display:grid;gap:var(--sp-sm);margin-bottom:var(--sp-lg)}
.rr__half{margin:0}
.rr__half img{display:block;width:100%;height:auto;background:#F2F2F2}
.rr__half figcaption{margin-top:.6em;font-size:.8125rem;line-height:1.5;color:var(--body)}
.rr__tag{display:inline-block;margin-right:.6em;font-size:.625rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.14em;color:var(--forest)}
.rr__credit{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);margin:0}
@media (min-width:48rem){
  .rr__pair{grid-template-columns:repeat(2,minmax(0,26rem));gap:var(--sp-md);align-items:start}
}
/* Her process, inside her section. Same forest accent and Assistant face as the
   rest of .architect — this block is quoting SOOP, not the site. */
.architect__process{border-top:1px solid #E4E4E4;padding-top:var(--sp-md);
  margin-top:var(--sp-lg)}
.architect__process h2{font-size:1.375rem;font-weight:600;color:var(--ink);margin:0 0 .5em}
.architect__process p{font-size:.9375rem;max-width:64ch}
.architect__process-cta{margin-top:1.1em}

/* -- where the three words came from --
   Her 2019 boards, one per vision word, sitting under the vision list they produced.
   Same forest accent and Assistant face as the rest of .architect: this is still
   SOOP's ground, and the boards predate the studio. */
.architect__origin{border-top:1px solid #E4E4E4;padding-top:var(--sp-md);margin-top:var(--sp-lg)}
.architect__origin h2{font-size:1.375rem;font-weight:600;color:var(--ink);margin:0 0 .5em}
.architect__origin > p{font-size:.9375rem;max-width:64ch}
.origin__set{margin:var(--sp-lg) 0 0;max-width:32rem}
.origin__set img{display:block;width:100%;height:auto;background:#F2F2F2}
.origin__set figcaption{margin-top:.6em;font-size:.875rem;line-height:1.6;color:var(--body)}
.origin__word{display:block;font-weight:600;font-size:1.0625rem;color:var(--ink);margin-bottom:.2em}
@media (min-width:60rem){
  .architect__origin{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg);align-items:start}
  .architect__origin h2,.architect__origin > p,.architect__origin .architect__process-cta{grid-column:1/-1}
  .origin__set{margin-top:0;max-width:none}
}