/* Story + Engineering + Credits on paper. Rectilinear, no shadows, no cards.
   Depth comes from hairline rules, tonal shifts in the stock, and negative space. */

/* ---------------- THE STORY ---------------- */
.story{padding:var(--sp-2xl) var(--gutter) var(--sp-xl)}
.story__grid{display:grid;gap:var(--sp-lg);max-width:78rem;margin:0 auto}
.story__prose p{font-family:var(--font-display);font-weight:400;
  font-size:var(--text-display);line-height:1.42;color:var(--ink);
  max-width:30ch;margin-bottom:.7em;letter-spacing:-.004em}
.story__prose .overline{font-family:var(--font-mono);font-style:normal;font-size:var(--text-label);
  font-weight:500;line-height:1.65;color:var(--copper-ink);max-width:none}
.story__coda{color:var(--muted)!important;font-style:normal!important;
  font-family:var(--font-mono)!important;font-size:var(--text-body)!important;
  letter-spacing:.02em;margin-top:var(--sp-md)!important}

.story__credit{border-top:1px solid var(--rule);padding-top:var(--sp-md)}
.story__architect{font-family:var(--font-display);font-size:var(--text-display);
  color:var(--ink);letter-spacing:.02em;margin:0 0 .3em}
.story__note{font-size:var(--text-caption);color:var(--muted);margin-top:var(--sp-md);max-width:34ch}

@media (min-width:60rem){
  .story__grid{grid-template-columns:minmax(0,1fr) minmax(14rem,20rem);gap:var(--sp-xl);align-items:start}
  .story__credit{border-top:0;border-left:1px solid var(--rule);padding:0 0 0 var(--sp-md)}
  .story__prose p{max-width:22ch}
}

/* ---------------- THE ENGINEERING ---------------- */
.eng{padding:var(--sp-xl) var(--gutter) var(--sp-2xl);border-top:1px solid var(--rule)}
.eng__head{max-width:78rem;margin:0 auto var(--sp-lg)}
.eng__title{max-width:16ch}

.eng__block{max-width:78rem;margin:0 auto;padding:var(--sp-lg) 0;
  display:grid;grid-template-columns:auto;gap:0 var(--sp-lg);align-items:start}
/* On paper a low-opacity mark washes out far faster than it does on near-black:
   .22 read as a faint blush. .42 holds as a copper watermark that is clearly
   present without competing with the title beside it. */
.eng__num{font-family:var(--font-display);font-size:var(--text-num);
  font-weight:600;
  color:var(--copper);opacity:.42;line-height:.8;letter-spacing:-.04em;
  display:block;margin-left:-.06em;pointer-events:none;user-select:none}
.eng__body{padding-top:var(--sp-sm)}
.eng__body p{color:var(--ink-2)}
.eng__body h3{margin-bottom:.55em}

@media (min-width:60rem){
  .eng__block{grid-template-columns:minmax(6rem,12rem) minmax(0,1fr)}
  .eng__num{margin-left:-.08em}
  .eng__body{padding-top:0}
}

/* Block 05 breaks the pattern on purpose — the thesis, not a spec. */
.eng__thesis{max-width:46rem;margin:var(--sp-xl) auto 0;text-align:center;
  padding-top:var(--sp-xl);border-top:1px solid var(--rule)}
.eng__thesis h3{font-size:var(--text-section);font-style:italic;font-weight:400;color:var(--ink);margin-bottom:.5em;max-width:none}
/* Display roman, not mono — centred monospace reads as ragged noise, and this
   paragraph is the argument, not a specification. */
.eng__thesis p{margin:0 auto;max-width:38ch;color:var(--ink-2);
  font-family:var(--font-display);font-weight:400;
  font-size:var(--text-display);line-height:1.45;letter-spacing:-.004em}

/* ---------------- CREDITS ---------------- */
/* The one tonal shift on the page: a deeper stock closes the document. */
.credits{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:var(--sp-xl) var(--gutter) var(--sp-lg)}
.credits__grid{max-width:78rem;margin:0 auto;display:grid;gap:var(--sp-lg)}
.credits__item p{max-width:none}
.credits__val{font-family:var(--font-display);font-size:var(--text-display);
  font-weight:500;color:var(--ink);
  line-height:1.15;margin-bottom:.35em;letter-spacing:-.005em}
.credits__sub{font-size:var(--text-caption);color:var(--muted)}
/* The licenses are the depth behind the general-contractor credit, not a credit of
   their own — mono, small and quiet, sitting under the name they belong to. They
   had their own column once, at display scale, which read as a fifth party to the
   project rather than as the proof behind the fourth. */
.credits__licenses{list-style:none;margin:.85em 0 0;padding:0;
  font-family:var(--font-mono);font-size:var(--text-label);line-height:1.75;
  color:var(--muted-2);letter-spacing:.02em}
.credits__licenses b{font-weight:500;color:var(--ink-2)}
.credits__licenses+p{margin-top:.85em}
.credits__foot{max-width:78rem;margin:var(--sp-xl) auto 0;padding-top:var(--sp-md);
  border-top:1px solid var(--paper-3);
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);
  display:flex;flex-wrap:wrap;gap:var(--sp-xs) var(--sp-lg);justify-content:space-between}

@media (min-width:36rem){
  .credits__grid{grid-template-columns:repeat(2,1fr);gap:var(--sp-lg) var(--sp-md)}
}
@media (min-width:68rem){
  .credits__grid{grid-template-columns:repeat(4,1fr);gap:var(--sp-md)}
}

/* ---------------- THE DESCENT ----------------
   Finished-house aerials, ordered by altitude rather than by date. Full-bleed
   and uncaptioned on purpose: the Arc above already narrates, so these only
   have to be looked at. Generous space between frames so each one lands as its
   own image instead of reading as a strip. */
.descent{border-top:1px solid var(--rule);background:var(--paper);
  padding:var(--sp-xl) 0 var(--sp-2xl)}
.descent__head{max-width:78rem;margin:0 auto var(--sp-lg);padding:0 var(--gutter)}
.descent__title{max-width:14ch}
.descent__lede{margin-top:var(--sp-md);color:var(--ink-2);max-width:46ch}
.descent__seq{display:grid;gap:var(--sp-xl)}
.descent__frame{margin:0}
.descent__frame img{width:100%;height:auto;background:var(--paper-3)}
@media (min-width:60rem){
  .descent__seq{gap:var(--sp-2xl)}
}

/* ---------------- THE OWNERS (directly under the hero) ---------------- */
.owners-top{display:grid;gap:var(--sp-md);align-items:center;
  max-width:78rem;margin:0 auto;padding:var(--sp-xl) var(--gutter) 0}
.owners-top__fig{margin:0}
.owners-top__fig img{width:100%;height:auto;background:var(--paper-3)}
.owners-top__title{font-size:var(--text-section);margin:.1em 0 .5em;max-width:12ch}
.owners-top__copy p{color:var(--ink-2);max-width:42ch}
.owners-top__copy p + p{margin-top:.8em}
.owners-top__links{font-family:var(--font-mono);font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.16em}
.owners-top__links a{margin-right:var(--sp-md);text-decoration:none;
  transition:color var(--dur-fast) linear,text-decoration-color var(--dur-fast) linear}
.owners-top__links a:hover,.owners-top__links a:focus-visible{
  text-decoration:underline;text-underline-offset:.25em;
  text-decoration-color:var(--copper-ink)}
@media (min-width:60rem){
  .owners-top{grid-template-columns:minmax(0,38%) minmax(0,1fr);gap:var(--sp-lg)}
}

/* ---------------- THE BUILDER (between the design credit and the Arc) ----------------
   Deliberately quiet: a mark, a paragraph, a license line. The architect's panel
   above is a wordmark on paper, so this one matches its register rather than
   competing with it. */
.builder{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:var(--sp-xl) var(--gutter)}
.builder__inner{max-width:78rem;margin:0 auto;display:grid;gap:var(--sp-md);
  align-items:center}
.builder__logo{width:auto;height:min(11rem,34vw);max-width:70%}
.builder__name{font-family:var(--font-display);font-size:var(--text-display);
  line-height:1.05;color:var(--ink);margin:.15em 0 .45em;max-width:16ch}
.builder__lede{color:var(--ink-2);max-width:46ch}
.builder__lic{margin-top:var(--sp-sm);font-family:var(--font-mono);
  font-size:var(--text-label);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);font-variant-numeric:tabular-nums}
.builder__link{margin-top:var(--sp-md)}
.builder__link a{font-family:var(--font-mono);font-size:var(--text-caption);
  text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:.15em}
@media (min-width:56rem){
  .builder__inner{grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:var(--sp-lg)}
  .builder__logo{height:auto;width:min(100%,17rem)}
}

/* ---------------- THE PLACE (Little Havana) ----------------
   A measured block, not a tourism panel. Same register as the spec tables on the
   element pages: label in mono, fact in prose, hairline between. Every entry is
   externally checkable — addresses, designation years, founding dates. */
.place{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:var(--sp-xl) var(--gutter) var(--sp-2xl)}
.place__head{max-width:78rem;margin:0 auto var(--sp-lg)}
.place__title{font-size:var(--text-section);max-width:16ch;margin:.1em 0 0}
.place__lede{margin-top:var(--sp-md);color:var(--ink-2);max-width:52ch}
.place__grid{max-width:78rem;margin:0 auto;display:grid;gap:0;
  border-top:1px solid var(--ink)}
.place__item{padding:var(--sp-md) 0;border-bottom:1px solid var(--paper-3);
  display:grid;gap:.35rem}
.place__k{font-family:var(--font-mono);font-weight:500;font-size:var(--text-label);
  text-transform:uppercase;letter-spacing:.14em;color:var(--copper-ink)}
.place__v{color:var(--ink-2);max-width:64ch}
/* The crew's lunches — the one line on this page written from inside the job
   rather than about it. Deliberately quiet and set at caption scale: it sits
   under a measured diagram, so it earns its place by being small, not loud. */
.place__lunch{max-width:52rem;margin:var(--sp-lg) auto 0;
  font-size:var(--text-caption);color:var(--ink-2);line-height:1.6}
.place__foot{max-width:78rem;margin:var(--sp-lg) auto 0;color:var(--ink-2);
  max-width:52ch;font-family:var(--font-display);font-size:var(--text-display);
  line-height:1.45;color:var(--ink)}
/* Map figure */
.place__map{max-width:78rem;margin:var(--sp-xl) auto 0;display:block}
/* The inline padding keeps the ADC watermark and the "THE PLACE" rail off the
   drawing — but both of those only exist on wide viewports, and unconditionally
   it ate 4rem of a 390px phone, squeezing the map to 283px. Apply it only where
   there is something to clear. */
@media (min-width:60rem){.place__map{padding-inline:2rem}}
/* The map is a photograph now, not an inline SVG.
   height:auto is NOT optional. The <img> carries width="2400" height="1600"
   attributes (correctly — they prevent layout shift), and those map to a
   PRESENTATIONAL height. Without height:auto the browser honours the 1600 and
   renders the map 347x1600 on a phone: a column of aerial photograph sixteen
   hundred pixels tall. Same trap as the film captions and the drawn map before
   it — size a media box on ONE axis and let the ratio derive the other. */
.place__map img{display:block;width:100%;height:auto;
  max-width:min(100%,52rem);margin-inline:auto;
  border:1px solid var(--paper-3);border-radius:2px;background:var(--paper-2)}
.place__map-caption{margin-top:.6rem;font-family:var(--font-mono);
  font-size:var(--text-label);color:var(--ink-2);line-height:1.5}
.place__map-note{display:block;color:var(--muted);margin-bottom:.2rem}
.place__map-caption a{color:var(--ink-2);text-decoration-color:var(--rule)}
.place__map-caption a:hover{color:var(--copper-ink)}
@media (min-width:48rem){
  .place__item{grid-template-columns:minmax(11rem,16rem) minmax(0,1fr);
    gap:var(--sp-lg);align-items:baseline}
}
@media (min-width:68rem){
  .place__grid{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--sp-2xl)}
  /* Once the grid splits into two columns each item is only half as wide, and
     the label/value split inside it then starves the value — measured at 176px
     of text in a 504px item on a 2560px display, 13 lines of ragged column.
     Two divisions of the same width is one too many, so inside a two-column
     grid the item stacks again and the label reads as an overline above its
     value, which is what it looks like at every other width anyway. */
  .place__item{grid-template-columns:minmax(0,1fr);gap:.35rem}
}

/* The in-depth hub. Reuses .place wholesale — same grid, same label/value
   rhythm — so the cluster reads as part of the record rather than as a
   bolted-on index. Only the link treatment is added. */
.explains .place__k a{color:var(--copper-ink);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) linear}
.explains .place__k a:hover,.explains .place__k a:focus-visible{
  border-bottom-color:var(--copper-ink)}

/* ---------------- CAROUSEL VARIANT for .place__grid ----------------
   Applied to the in-depth hub (nine cards) and The Place. Both were long
   vertical runs; horizontally they cost one screen instead of four.

   Deliberately NO JavaScript. Every card stays in the DOM and in source order,
   which matters more here than usual: this cluster exists to be found, and a
   scripted carousel that mounts slides on demand would hide the content from
   exactly the crawlers and answer engines it was built for. This is a scroll
   container with snap points — the browser's own behaviour, free on every
   platform, and it still works with JS disabled.

   NOTE this reverses the earlier decision to strip carousels from the site.
   That call was about photographic plates, where a carousel was hiding the
   work behind an interaction. Text cards are the opposite case: the reader can
   see what they are getting and chooses whether to keep going. */
.place__grid--carousel{
  display:flex;
  gap:var(--sp-md);
  grid-template-columns:none;      /* undo the 2-col rule at >=68rem */
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  scroll-padding-inline:var(--gutter);
  padding-block:var(--sp-md) var(--sp-sm);
  border-top:1px solid var(--ink);
  /* full-bleed the track so cards can run to the edge and read as a strip,
     while the first card still lines up with the text column above it */
  margin-inline:calc(50% - 50vw);
  padding-inline:max(var(--gutter), calc(50vw - 39rem));
  scrollbar-width:thin;
  scrollbar-color:var(--rule) transparent;
}
.place__grid--carousel .place__item{
  flex:0 0 min(78vw, 22rem);
  scroll-snap-align:start;
  border-bottom:0;
  border-left:1px solid var(--paper-3);
  padding:var(--sp-sm) 0 var(--sp-sm) var(--sp-md);
}
/* The 48rem rule turns items into a label/value pair of columns; inside a
   carousel each card is narrow, so keep them stacked at every width. */
.place__grid--carousel .place__item{grid-template-columns:minmax(0,1fr);gap:.4rem}
.place__grid--carousel .place__v{max-width:none}
.place__grid--carousel::-webkit-scrollbar{height:6px}
.place__grid--carousel::-webkit-scrollbar-thumb{background:var(--rule);border-radius:3px}
/* A scroll container must be reachable by keyboard, or the cards past the fold
   are unreachable without a mouse. tabindex is set in the markup; this is the
   focus affordance. */
.place__grid--carousel:focus-visible{outline:2px solid var(--copper-ink);outline-offset:4px}
@media (prefers-reduced-motion:reduce){
  .place__grid--carousel{scroll-behavior:auto}
}

/* ---- Desktop: carousel unwraps to a grid ----
   On touch the horizontal swipe is the natural gesture. With a mouse the
   overflow is nearly invisible — the owner reported the cards as missing.
   Above 60rem: stop scrolling, let the items wrap.

   The margin-inline / padding-inline full-bleed trick must be undone;
   it existed to let the scroll track run to the viewport edges, which is
   no longer the goal. Restore the normal column alignment.

   gap and visual rhythm match the base .place__grid so wrapped items
   look like the rest of the fact-block above them, not a dumped list. */
@media (min-width:60rem){
  .place__grid--carousel{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
    gap:var(--sp-md);
    overflow:visible;
    overscroll-behavior-x:auto;
    scroll-snap-type:none;
    /* Undo the full-bleed track — it was for the scroll strip.
       Use auto (not 0) so the grid centers inside the section's content
       width, aligning with .place__head above it. margin:0 auto is the
       base .place__grid rule; the strip overrides it; now we restore it. */
    margin-inline:auto;
    padding-inline:0;
    padding-block:0;
    /* Restore the base border style. */
    border-top:1px solid var(--ink);
  }

  /* Each item can fill its column now; remove the fixed flex-basis width
     and the border-left that was a scroll-track card separator. */
  .place__grid--carousel .place__item{
    flex:none;
    width:100%;
    scroll-snap-align:none;
    border-left:none;
    border-bottom:1px solid var(--paper-3);
    padding:var(--sp-md) 0;
    padding-left:0;
  }
}

/* ---------------- INSIDE (early on the spine) ----------------
   The Inside section carries seven frames now, not one. Rhythm between them is
   larger than between plates elsewhere on the spine: these are rooms, and they
   need to land one at a time rather than read as a contact sheet.
   Caption measure is capped because the frames are full-bleed and an uncapped
   caption under a 1512px plate runs past 120 characters a line.
   max-width for figcaption settled at 42rem (verified at 1512px). */
.inside{border-top:1px solid var(--rule);background:var(--paper-2);
  padding:var(--sp-xl) var(--gutter)}
.inside__wrap{max-width:78rem;margin:0 auto}
/* Clear the chapter rail.
   .rail is fixed at left-centre and occupies roughly x 24-202 at 1512. This
   section's overline, title and lede sit in that column, so the rail's paper
   panel was landing on the headline — measured: the word "it" in "What all of
   it was for." was behind the panel, and the lede's second line with it.
   13rem matches the offset .arc__controls already uses for the same reason;
   max() keeps the normal gutter on narrower screens. Below 601px the rail is
   display:none, so no offset there — an unconditional indent would leave a
   dead margin on every phone. */
@media (min-width:37.5625rem){
  .inside__wrap>.overline,
  .inside__title,
  .inside__lede,
  .inside__credit{padding-left:max(var(--gutter),13rem)}
}
.inside__title{font-size:var(--text-section);margin:.1em 0 .5em;max-width:14ch}
.inside__lede{max-width:38rem;margin-top:var(--sp-md);
  font-size:var(--text-body);line-height:1.6;color:var(--ink)}
.inside .plate + .plate{margin-top:var(--sp-xl)}
.inside .plate figcaption,.inside .plate--inset figcaption{max-width:42rem}
.inside__credit{margin-top:var(--sp-lg);font-family:var(--font-mono);
  font-size:var(--text-label);text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted)}

/* Instagram line in the Owners credit — shared by / and /es/. */
.credits__ig a{display:inline-flex;align-items:center;gap:.4em}
.credits__ig .ig{flex:0 0 auto;opacity:.85}
.credits__ig a:hover .ig,.credits__ig a:focus-visible .ig{opacity:1}

/* ---- AT A GLANCE ----
   A case-study masthead directly under the hero: who designed it, who built it,
   who engineered it, what it is made of, what is remarkable about it.

   Added after an outside audit found a reader had to work too hard to answer
   "what is this?". The audit asked for a property spec sheet — bedrooms, baths,
   interior SF, "Completed 2026" — and consent.md bars all of it, so this is the
   credits panel of a monograph instead. That is not a consolation prize: for a
   builder's case study, WHO stood behind the work is the more useful fact than
   how many bedrooms it has.

   <dl> because these are genuinely term/definition pairs, wrapped one row per
   <div> so each pair can be a grid row without the label and value drifting
   apart. Label column is fixed at desktop and stacks on phones — a two-column
   grid at 390px would leave the values four words wide. */
.glance{padding:var(--sp-xl) 0 var(--sp-lg)}
.glance__inner{max-width:78rem;margin-inline:auto;padding-inline:var(--gutter)}
.glance__list{margin:var(--sp-md) 0 0;padding:0}
.glance__row{display:grid;grid-template-columns:10rem 1fr;gap:var(--sp-sm);
  padding:.7rem 0;border-top:1px solid var(--rule)}
.glance__row:last-child{border-bottom:1px solid var(--rule)}
.glance__row dt{margin:0;font-family:var(--font-mono);font-size:var(--text-label);
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  line-height:1.6}
.glance__row dd{margin:0;font-family:var(--font-display);
  font-size:var(--text-body);line-height:1.5;color:var(--ink);text-wrap:pretty}

/* Phones: stack. A 10rem label column plus a value at 390px leaves the value
   about four words wide and the whole block reads as a broken table. */
@media (max-width:40rem){
  .glance__row{grid-template-columns:1fr;gap:.15rem;padding:.6rem 0}
  .glance__row dt{line-height:1.4}
}