/* ============================================================ PREMIER — main.css · v3.0 SHVO hero + SHVO stats slider + Tishman editorial homepage on a 12-column grid + Tishman oxblood footer. The homepage is built from ONE repeated cell (.ed): statement · media · caption · dispatch link alternating left/right, separated by --s-block of air. That repetition is the whole effect — resist adding variants. ============================================================ */ /* ---------- reset / base ---------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{background:var(--bg);color:var(--text);font-family:var(--font-ui); font-size:var(--step-0);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:hidden} img,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} ::selection{background:var(--red);color:#fff} :focus-visible{outline:2px solid var(--red);outline-offset:3px} h1,h2,h3,.font-display{font-family:var(--font-display);font-weight:400; letter-spacing:-.014em;line-height:var(--lh-statement)} /* ---------- layout ---------- */ .container{max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)} .container--wide{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:var(--s-block)} /* the 12-column editorial grid — every home block sits on it */ .grid12{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter); display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap)} /* ---------- type roles ---------- Display type sits in --display-ink, a step lighter than body text. At this size full-strength ink reads as shouting; the reference never lets its big type go dark. */ .statement{font-family:var(--font-display);font-weight:400;font-size:var(--step-4); line-height:var(--lh-statement);letter-spacing:-.018em;color:var(--display-ink); text-wrap:pretty} .lead{font-family:var(--font-display);font-weight:400;font-size:var(--step-3); line-height:var(--lh-lead);letter-spacing:-.012em;color:var(--display-ink); text-wrap:pretty} .sub{font-family:var(--font-serif);font-size:var(--step-1);line-height:1.5;color:var(--text-soft)} .accent{color:var(--red)} .text-soft{color:var(--text-soft)} .measure{max-width:var(--measure)} .kicker{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase; letter-spacing:.22em;color:var(--text-faint);font-weight:500} .credit{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.14em; text-transform:uppercase;color:var(--text-faint);margin-top:.8rem} /* ---------- the micro button ---------- Replaces v3's serif-underline-plus-long-arrow link, which was the reference's single most recognisable component. This is the other half of the scale contrast: a 71px statement answered by an 11px control. The gap between the two IS the luxury signal. */ .dispatch{display:inline-flex;align-items:stretch;min-width:165px;height:32px; border:1px solid var(--line-strong);color:var(--text-soft);width:max-content; transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .dispatch__label{display:flex;align-items:center;flex:1;padding:0 1em; font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.15em;white-space:nowrap} .dispatch__arrow{position:relative;display:flex;flex:none;width:32px; border-left:1px solid var(--line-strong);transition:border-color var(--dur-fast) var(--ease)} .dispatch__arrow::before{content:"";position:absolute;top:50%;left:9px;width:13px;height:1px; background:currentColor;transition:transform var(--dur-med) var(--ease)} .dispatch__arrow::after{content:"";position:absolute;top:50%;right:9px;width:5px;height:5px; border-top:1px solid currentColor;border-right:1px solid currentColor; transform:translateY(-50%) rotate(45deg);transition:transform var(--dur-med) var(--ease)} .dispatch:hover{color:var(--red);border-color:var(--red)} .dispatch:hover .dispatch__arrow{border-color:var(--red)} .dispatch:hover .dispatch__arrow::before{transform:translateX(3px)} .dispatch:hover .dispatch__arrow::after{transform:translateY(-50%) rotate(45deg) translate(2px,2px)} .dispatch--light{color:rgba(255,255,255,.86);border-color:rgba(255,255,255,.42)} .dispatch--light .dispatch__arrow{border-color:rgba(255,255,255,.42)} .dispatch--light:hover{color:#fff;border-color:#fff} .dispatch--light:hover .dispatch__arrow{border-color:#fff} /* ---------- caption (Tishman: skewed red slash + uppercase name, City) ---------- No flex `gap` here: it would also open a space between the name and its comma, printing "WANSKUCK MILL , Providence". The spacing lives on the slash instead. */ .caption{display:flex;align-items:center;margin-top:1.1rem; font-family:var(--font-ui);font-size:var(--step--1);color:var(--text);line-height:1.4} .caption::before{content:"";flex:none;width:2px;height:1.15em;background:var(--red); transform:skewX(-16deg);margin-right:.75rem} .caption__name{text-transform:uppercase;letter-spacing:.055em} .caption:empty{display:none} /* ---------- reveals ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--ease),transform 1s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-mask{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.1s var(--ease-mat)} .reveal-mask.in{opacity:1;transform:none} /* per-word reveal, staggered line by line — wired up by app.js */ .split .w{display:inline-block;opacity:0;transform:translateY(.55em); transition:opacity .75s var(--ease),transform .9s var(--ease-mat)} .split.in .w{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ .reveal,.reveal-mask{opacity:1;transform:none;clip-path:none;transition:none} .split .w{opacity:1;transform:none;transition:none} .scroll-cue__line::after,.stats__dot.is-active::after{animation:none;transform:scaleX(1)}} .no-js .reveal,.no-js .reveal-mask{opacity:1;transform:none;clip-path:none} /* ---------- media ---------- */ .r-16-9{aspect-ratio:16/9}.r-3-2{aspect-ratio:3/2}.r-4-3{aspect-ratio:4/3} .r-1-1{aspect-ratio:1/1}.r-3-4{aspect-ratio:3/4}.r-4-5{aspect-ratio:4/5}.r-5-4{aspect-ratio:5/4} figure{position:relative;overflow:hidden;background:var(--stone-deep)} figure img{width:100%;height:100%;object-fit:cover} /* placeholder box — where the photo is not chosen yet */ .ph{position:relative;background:var(--stone-deep); display:flex;align-items:center;justify-content:center;overflow:hidden} .ph::before{content:"";position:absolute;inset:0; background:repeating-linear-gradient(var(--stripe-angle),rgba(30,28,25,.05) 0 1px,transparent 1px 14px)} .ph::after{content:attr(data-ph);position:relative;font-family:var(--font-mono);font-size:.66rem; letter-spacing:.2em;text-transform:uppercase;color:var(--text-faint);text-align:center;padding:1rem} /* ---------- THE MILL WINDOW — the house motif ---------- Replaces the oblique bars of v1–v4. Those were the reference's single most recognisable graphic and reading as Tishman was the whole problem. This is drawn from the buildings themselves: five narrow bays under a round arch, the module that repeats across every elevation Premier owns and that sits in the background of nearly every photograph on the site. It cannot be borrowed by a competitor, because it is a picture of the asset. Hairline only — never filled. It is a drawing, not a decoration. */ .motif{position:absolute;z-index:1;pointer-events:none;display:flex;align-items:flex-end; gap:clamp(6px,.8vw,12px);width:clamp(150px,18vw,300px);aspect-ratio:5/4; color:var(--red);opacity:.42} .motif i{flex:1;height:100%;border:1px solid currentColor;border-bottom:0; border-radius:999px 999px 0 0 / 42% 42% 0 0} /* second and fourth bays run short — the rhythm of a real elevation, where the stair bay interrupts the window line */ .motif i:nth-child(2),.motif i:nth-child(4){height:78%} .motif--light{color:#fff;opacity:.3} .motif--sm{width:clamp(110px,12vw,190px)} .motif--tr{top:0;right:0} /* ============================================================ HEADER + OVERLAY (SHVO) ============================================================ */ .site-header{position:fixed;inset:0 0 auto 0;z-index:60;height:var(--header-h); display:flex;align-items:center;justify-content:flex-end;padding-inline:var(--gutter); transition:height var(--dur-med) var(--ease),background var(--dur-med) var(--ease),border-color var(--dur-med)} .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:block} .brand img{height:54px;width:auto;transition:height var(--dur-med) var(--ease)} .site-header.is-scrolled,.site-header--solid{height:var(--header-h-sm);background:var(--stone); border-bottom:1px solid var(--line);justify-content:space-between} .site-header.is-scrolled .brand,.site-header--solid .brand{position:static;transform:none} .site-header.is-scrolled .brand img,.site-header--solid .brand img{height:30px} .burger{position:relative;z-index:80;display:inline-flex;align-items:center;gap:.8em;background:none; border:0;cursor:pointer;color:#fff;font-family:var(--font-mono);font-size:var(--step--1); text-transform:uppercase;letter-spacing:.2em;padding:.4em} .site-header.is-scrolled .burger,.site-header--solid .burger{color:var(--text)} .burger__lines{position:relative;width:28px;height:12px} .burger__lines span{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform var(--dur-med) var(--ease)} .burger__lines span:nth-child(1){top:0}.burger__lines span:nth-child(2){bottom:0} .nav-overlay{position:fixed;inset:0;z-index:70;background:var(--ink);clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease-mat);display:flex;flex-direction:column;justify-content:center; padding:var(--header-h) var(--gutter) var(--s-xl);pointer-events:none} .nav-overlay.is-open{clip-path:inset(0 0 0 0);pointer-events:auto} .nav-overlay__slab{position:absolute;top:-10%;right:-6%;width:44vw;height:120%;background:var(--red);opacity:.92; clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);transform:translateX(110%); transition:transform 1s var(--ease-mat) .05s} .nav-overlay.is-open .nav-overlay__slab{transform:translateX(0)} .nav-overlay__slab::after{content:"";position:absolute;inset:0; background:repeating-linear-gradient(var(--stripe-angle),rgba(255,255,255,.07) 0 9px,transparent 9px 26px)} .nav-close{position:absolute;top:calc(var(--header-h-sm)/2);right:var(--gutter);z-index:6;width:44px;height:44px; background:none;border:0;cursor:pointer;transform:rotate(-90deg);opacity:0;transition:transform .6s var(--ease) .2s,opacity .4s .2s} .nav-overlay.is-open .nav-close{transform:rotate(0);opacity:1} .nav-close::before,.nav-close::after{content:"";position:absolute;left:8px;right:8px;top:50%;height:1.5px;background:#fff} .nav-close::before{transform:rotate(45deg)}.nav-close::after{transform:rotate(-45deg)} .nav-close:hover::before,.nav-close:hover::after{background:var(--red-bright)} .nav-overlay__inner{position:relative;z-index:2;max-width:var(--container-wide);margin-inline:auto;width:100%; display:grid;grid-template-columns:1fr auto;gap:var(--s-2xl);align-items:end} .nav-overlay__list{list-style:none} .nav-overlay__item{overflow:hidden} .nav-overlay__item a{display:flex;align-items:baseline;gap:.5em;font-family:var(--font-display);color:var(--dark-text); font-size:var(--step-5);line-height:1.1;padding:.05em 0; transform:translateY(105%);transition:transform .8s var(--ease),color var(--dur-fast)} .nav-overlay.is-open .nav-overlay__item a{transform:translateY(0)} .nav-overlay__item:nth-child(1) a{transition-delay:.14s}.nav-overlay__item:nth-child(2) a{transition-delay:.2s} .nav-overlay__item:nth-child(3) a{transition-delay:.26s}.nav-overlay__item:nth-child(4) a{transition-delay:.32s} .nav-overlay__item a:hover{color:var(--red-bright)} .nav-overlay__item .n{font-family:var(--font-mono);font-size:.9rem;color:var(--red-bright);transform:translateY(-.5em)} .nav-overlay__meta{color:var(--dark-text-soft);font-family:var(--font-mono);font-size:var(--step--1); letter-spacing:.06em;line-height:2;text-align:right} .nav-overlay__meta a:hover{color:#fff} @media(max-width:820px){.nav-overlay__inner{grid-template-columns:1fr}.nav-overlay__meta{text-align:left;margin-top:var(--s-l)}.nav-overlay__slab{width:82vw}} .nav-overlay.is-open ~ .site-header .burger{opacity:0;pointer-events:none;transition:opacity .3s} /* ============================================================ HERO (SHVO — clean) ============================================================ */ .home-hero{position:relative;height:100svh;min-height:600px;overflow:hidden} .home-hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .home-hero__scrim{position:absolute;inset:0;z-index:1;background: linear-gradient(180deg,rgba(8,7,6,.50) 0%,rgba(8,7,6,.12) 24%,rgba(8,7,6,.18) 50%,rgba(8,7,6,.72) 100%)} .home-hero__content{position:absolute;z-index:5;left:var(--gutter);bottom:clamp(8.4rem,16vh,12rem); width:min(760px,72vw);color:#fff;text-shadow:0 2px 34px rgba(0,0,0,.34)} .home-hero__eyebrow{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem; font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500;text-transform:uppercase; letter-spacing:.22em;color:rgba(255,255,255,.82)} .home-hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--red-bright);transform:skewX(-16deg)} .home-hero__title{max-width:12ch;font-family:var(--font-display);font-weight:400; font-size:var(--step-4);line-height:1.01;letter-spacing:-.02em;color:#fff;text-wrap:balance} .home-hero__lead{max-width:49ch;margin-top:1.25rem;font-family:var(--font-serif); font-size:var(--step-1);line-height:1.5;color:rgba(255,255,255,.9)} .home-hero__actions{display:flex;flex-wrap:wrap;gap:.8rem 1.8rem;margin-top:1.7rem} .hero-link{display:inline-flex;align-items:center;min-height:42px;padding:.75rem 1.15rem;border:1px solid rgba(255,255,255,.62); font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.15em; color:#fff;transition:background var(--dur-fast),color var(--dur-fast),border-color var(--dur-fast)} .hero-link:hover{background:#fff;color:var(--red-deep);border-color:#fff} .hero-link--quiet{border-color:transparent;padding-inline:0} .hero-link--quiet:hover{background:transparent;color:#fff;border-color:transparent} .hero-signature{position:absolute;z-index:5;left:var(--gutter);bottom:2.3rem; font-family:var(--font-serif);font-size:var(--step--1);font-style:italic;letter-spacing:.02em;color:rgba(255,255,255,.76)} /* The motto. No scroll trick — it was a gimmick and it read as one. The interest is typographic instead: a hairline rule, then the first clause set as a small letterspaced label, then the payoff large in Tiempos italic. Same small-against-large contrast the whole site runs on. */ .hero-motto{position:absolute;z-index:5;left:var(--gutter);bottom:clamp(2.6rem,6vh,4.5rem); margin:0;max-width:min(18ch,52vw);color:#fff; text-shadow:0 2px 40px rgba(0,0,0,.42);pointer-events:none} .hero-motto::before{content:"";display:block;width:46px;height:2px;background:var(--red-bright); transform:skewX(-16deg);margin-bottom:clamp(1rem,2vh,1.6rem)} .hero-motto__a{display:block;font-family:var(--font-ui);font-weight:500;font-size:var(--t-micro); text-transform:uppercase;letter-spacing:.28em;color:rgba(255,255,255,.82)} .hero-motto__b{display:block;margin-top:clamp(.6rem,1.4vh,1rem); font-family:var(--font-display);font-style:italic;font-weight:400; font-size:var(--t-motto);line-height:1.04;letter-spacing:-.018em} @media(max-width:820px){.hero-motto{max-width:min(14ch,72vw);bottom:7rem} .home-hero__content{width:calc(100% - var(--gutter) * 2);bottom:8.6rem} .home-hero__lead{font-size:1rem;max-width:38ch}.hero-signature{bottom:1.6rem;max-width:58vw}} .scroll-cue{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:2.4rem; display:flex;flex-direction:column;align-items:center;gap:.9rem;color:#fff; font-family:var(--font-mono);font-size:.66rem;letter-spacing:.3em;text-transform:uppercase} .scroll-cue__line{position:relative;width:1px;height:52px;background:rgba(255,255,255,.4);overflow:hidden} .scroll-cue__line::after{content:"";position:absolute;top:-52px;left:0;width:100%;height:52px;background:var(--red-bright); animation:cue 2.1s var(--ease) infinite} @keyframes cue{0%{transform:translateY(0)}60%,100%{transform:translateY(104px)}} /* ============================================================ PAGE HERO — every sub-page gets the homepage treatment. Photo now, video later: .page-hero__media takes either. The header stays fixed over it, so the logo is always a way home and the burger is always a way into the menu. ============================================================ */ /* Full page, exactly like the home hero — the centred logo needs the room. */ .page-hero{position:relative;height:100svh;min-height:600px;overflow:hidden; display:flex;align-items:flex-end;color:#fff} .page-hero--short{height:78svh;min-height:520px} .page-hero__media,.page-hero__media img,.page-hero__media video{position:absolute;inset:0; width:100%;height:100%;object-fit:cover} .page-hero__scrim{position:absolute;inset:0;background: linear-gradient(180deg,rgba(8,7,6,.44) 0%,rgba(8,7,6,.10) 26%,rgba(8,7,6,.14) 58%,rgba(8,7,6,.62) 100%)} .page-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container-wide); margin-inline:auto;padding:0 var(--gutter) clamp(3rem,7vh,5.5rem)} .page-hero__eyebrow{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.82); display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem} .page-hero__eyebrow::before{content:"";width:34px;height:2px;background:var(--red-bright);transform:skewX(-16deg)} .page-hero__title{font-family:var(--font-display);font-weight:400;font-size:var(--step-4); line-height:var(--lh-statement);letter-spacing:-.018em;color:#fff;max-width:16ch} .page-hero__lead{margin-top:1.6rem;max-width:44ch;font-family:var(--font-serif); font-size:var(--step-1);line-height:1.5;color:rgba(255,255,255,.9)} .page-hero__meta{margin-top:clamp(1.6rem,3vw,2.4rem);display:flex;flex-wrap:wrap;gap:.9rem 2.2rem; font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.1em;color:rgba(255,255,255,.78)} .page-hero .scroll-cue{flex-direction:row;gap:.9rem;left:auto;right:var(--gutter); transform:none;align-items:center} .page-hero .scroll-cue__line{width:52px;height:1px} .page-hero .scroll-cue__line::after{top:0;left:-52px;width:52px;height:100%; animation:cue-h 2.1s var(--ease) infinite} @keyframes cue-h{0%{transform:translateX(0)}60%,100%{transform:translateX(104px)}} @media(max-width:760px){.page-hero{height:66svh}.page-hero .scroll-cue{display:none}} .hero-media-toggle{position:absolute;z-index:8;right:var(--gutter);bottom:2rem;display:inline-flex; align-items:center;gap:.65rem;min-width:82px;padding:.65rem .8rem;border:1px solid rgba(255,255,255,.48); background:rgba(10,10,10,.18);backdrop-filter:blur(8px);color:#fff;cursor:pointer; font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.14em} .hero-media-toggle::before{content:"";width:7px;height:10px;border-left:2px solid currentColor;border-right:2px solid currentColor} .hero-media-toggle[aria-pressed="true"]::before{width:0;height:0;border:0;border-top:5px solid transparent; border-bottom:5px solid transparent;border-left:8px solid currentColor} .hero-media-toggle:hover,.hero-media-toggle:focus-visible{background:#fff;color:var(--red-deep);outline:none} .page-hero .hero-media-toggle{right:auto;left:var(--gutter)} /* ============================================================ STATS SLIDER (SHVO — three figures at a time, auto-rotating) Figures in Tiempos brick-red, labels in mono graphite. ============================================================ */ .stats{background:var(--surface);border-bottom:1px solid var(--line);overflow:hidden} .stats__inner{max-width:var(--container-wide);margin-inline:auto; padding:clamp(3.5rem,7vw,6.5rem) var(--gutter) clamp(2.2rem,4vw,3.5rem)} .stats__viewport{position:relative} .stats__slide{display:grid;grid-template-columns:repeat(3,1fr);align-items:start; position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .75s var(--ease)} .stats__slide.is-active{position:relative;opacity:1;visibility:visible} .stat{padding-inline:clamp(1rem,3vw,3rem);text-align:center;border-left:1px solid var(--line-strong)} .stat:first-child{border-left:0} .stat__value{font-family:var(--font-display);font-weight:400;font-size:var(--t-stat);line-height:1; color:var(--red);letter-spacing:-.02em;font-feature-settings:"tnum" 1;white-space:nowrap} .stat__label{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase; letter-spacing:.16em;color:var(--graphite);margin-top:1.1rem;line-height:1.5} .stat--featured .stat__value{font-size:clamp(3rem,1.4rem + 4.4vw,6.3rem);color:var(--red-deep)} .stat--featured .stat__label{font-weight:500;color:var(--red-deep)} .stats__nav{display:flex;justify-content:center;gap:.6rem;margin-top:clamp(2rem,3.5vw,3rem)} .stats__dot{position:relative;width:58px;height:3px;border:0;padding:0;background:var(--line-strong);cursor:pointer;overflow:hidden} .stats__dot::after{content:"";position:absolute;inset:0;background:var(--red);transform:scaleX(0);transform-origin:left} .stats__dot.is-active::after{animation:stats-progress 4.8s linear forwards} @keyframes stats-progress{to{transform:scaleX(1)}} .stats__dot:hover{background:var(--red-mid)} .stats__hint{margin-top:.8rem;text-align:center;font-family:var(--font-ui);font-size:var(--t-micro); text-transform:uppercase;letter-spacing:.15em;color:var(--text-faint)} @media(max-width:820px){ .stats__slide{grid-template-columns:1fr;gap:2.4rem} .stat{border-left:0;border-top:1px solid var(--line-strong);padding:1.5rem 0 0;text-align:left} .stat:first-child{border-top:0;padding-top:0} .stats__nav{justify-content:flex-start}.stats__hint{text-align:left}} /* ============================================================ HOMEPAGE — the repeated editorial cell ============================================================ */ /* --- opening: two serif paragraphs, indented one column (reference: x=200/1307) --- */ .opening{padding-block:var(--s-block)} .opening__lead,.opening__body{grid-column:2/12} .opening__body{margin-top:clamp(2.5rem,5vw,4.5rem)} @media(max-width:900px){.opening__lead,.opening__body{grid-column:1/-1}} /* --- .ed — statement + media + caption + link, alternating sides --- align-items:center is load-bearing. Grid items stretch by default, so the short text column was being stretched to the height of the tall image and its content pinned to the top — leaving a 300–450px hole under every link. That hole is what made the page read as empty. */ .ed{position:relative;padding-block:var(--s-block);align-items:center} .ed__text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start} .ed__text .statement{margin-bottom:clamp(1.6rem,3vw,2.6rem)} .ed__text .sub{margin-bottom:clamp(2rem,3.5vw,3rem);max-width:38ch} .ed__media{position:relative;z-index:1} /* text left (cols 1–5) · media right (cols 8–12) — the reference proportions */ .ed--text-left .ed__text {grid-column:1/6;grid-row:1} .ed--text-left .ed__media{grid-column:8/13;grid-row:1} /* media left (cols 1–6) · text right (cols 8–12) */ .ed--text-right .ed__media{grid-column:1/7;grid-row:1} .ed--text-right .ed__text {grid-column:8/13;grid-row:1} /* the running section index, parked in the left margin */ .ed__index{position:absolute;left:calc(var(--gutter) * .34);top:var(--s-block); font-family:var(--font-mono);font-size:.66rem;letter-spacing:.24em;color:var(--text-faint)} @media(max-width:1150px){.ed__index{display:none}} @media(max-width:900px){ .ed{padding-block:clamp(3.5rem,9vw,6rem)} .ed--text-left .ed__text,.ed--text-left .ed__media, .ed--text-right .ed__text,.ed--text-right .ed__media{grid-column:1/-1;grid-row:auto} .ed__text{padding-top:1.8rem} .ed--text-right .ed__media{order:-1}} /* --- the image slider inside every .ed cell --- */ .slider{position:relative} .slider__stage{position:relative;overflow:hidden;background:var(--stone-deep)} /* every slide is absolute — the stage's aspect-ratio class holds the box open, so a placeholder can sit in any position, first included */ .slider__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease);pointer-events:none;will-change:opacity} .slider__slide.is-active{opacity:1;pointer-events:auto} .slider__slide img{width:100%;height:100%;object-fit:cover} .slider__bar{display:flex;align-items:center;justify-content:space-between;gap:1.5rem} .slider__nav{display:flex;gap:1.4rem;flex:none;margin-top:1.1rem} .slider__btn{position:relative;width:30px;height:12px;background:none;border:0;padding:0;cursor:pointer; color:var(--text);transition:color var(--dur-fast),opacity var(--dur-fast)} .slider__btn::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor} .slider__btn::after{content:"";position:absolute;top:50%;width:6px;height:6px; border-top:1px solid currentColor;border-right:1px solid currentColor} .slider__btn--prev::after{left:0;transform:translateY(-50%) rotate(-135deg)} .slider__btn--next::after{right:0;transform:translateY(-50%) rotate(45deg)} .slider__btn:hover{color:var(--red)} .slider__btn[disabled]{opacity:.28;cursor:default} .slider--single .slider__nav{display:none} /* --- showcase: oxblood panel bleeding right, photo flat and overlapping on the left --- */ .showcase{position:relative;padding-block:var(--s-block)} .showcase__panel{margin-left:22%;min-height:clamp(360px,40vw,600px); background:var(--red-deep);color:#fff;display:flex;flex-direction:column;justify-content:center; padding:clamp(3rem,6vw,6rem) clamp(3rem,7vw,7rem); /* keeps the panel's text clear of the overlapping photo — ≈110px of air, as in the reference */ padding-left:clamp(6rem,36vw,42rem)} /* .statement carries --display-ink, which is correct on the light ground and catastrophic on oxblood (1.64:1). Reverse it here. */ .showcase__panel .statement{margin-bottom:clamp(2rem,3.5vw,3rem);max-width:15ch;color:#fff} .showcase__copy{max-width:42ch;margin-bottom:clamp(2rem,3vw,2.8rem);font-family:var(--font-serif); font-size:var(--step-0);line-height:1.65;color:rgba(255,255,255,.78)} .showcase__media{position:absolute;left:var(--gutter);top:50%;z-index:2;width:min(44%,660px); transform:translateY(-38%) translateX(-48px);opacity:0; box-shadow:0 40px 90px -40px rgba(0,0,0,.5); transition:transform 1.2s var(--ease-mat),opacity .9s var(--ease)} .showcase__media.in{transform:translateY(-38%) translateX(0);opacity:1} .showcase__media .slider__stage{aspect-ratio:5/4} @media(max-width:900px){ .showcase{padding-block:clamp(3.5rem,9vw,6rem)} .showcase__panel{margin-left:0;padding:clamp(2.5rem,7vw,4rem);min-height:0} .showcase__media{position:relative;left:0;top:0;width:100%;transform:none;opacity:1; margin-bottom:2.2rem;box-shadow:none;padding-inline:var(--gutter)} .showcase__media.in{transform:none}} /* --- press: statement + the mill window + vertical photo --- */ .pressblock .motif{top:calc(var(--s-block) * .5);left:0;transform:translateX(-34%)} @media(max-width:900px){.pressblock .motif{display:none}} /* The greige quote panel was removed: it was the reference's most recognisable single move (roman + italic statement on a warm grey band), and the motto it carried now lives on the hero, where it lands first. */ /* ============================================================ THE LEDGER — the holdings, typeset. No photography, no adjectives. This is the one block on the site that derives from neither reference: an institutional fund cannot disclose its book, a family office can. It is also the only block that stays true when every photograph is replaced. ============================================================ */ .ledger{padding-block:var(--s-block);background:var(--surface)} .ledger__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline; gap:2rem;flex-wrap:wrap;padding-bottom:1.4rem;border-bottom:1px solid var(--line-strong)} .ledger__title{font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-lead); color:var(--display-ink)} .ledger__note{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft)} .ledger__labels,.ledger__row{grid-column:1/-1;display:grid; grid-template-columns:.7fr 2.6fr 1.4fr 1.3fr 1.4fr .9fr;gap:var(--grid-gap);align-items:baseline} .ledger__labels--compact,.ledger__row--compact{grid-template-columns:2.7fr 1.4fr 1.4fr 1.4fr .9fr} .ledger__labels{padding:1rem 0 .6rem;font-family:var(--font-ui);font-size:var(--t-micro); font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--text-faint)} .ledger__row{padding:clamp(1rem,1.9vw,1.5rem) 0;border-top:1px solid var(--line)} .ledger__year{font-family:var(--font-mono);font-size:var(--step--1);color:var(--red);letter-spacing:.06em} .ledger__name{font-family:var(--font-display);font-size:var(--step-1);line-height:1.2;color:var(--display-ink)} .ledger__cell{font-family:var(--font-ui);font-size:var(--step--1);color:var(--text-soft);line-height:1.5} .ledger__scale{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.04em;color:var(--text)} .ledger__status{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.16em;text-align:right;color:var(--text-soft)} .ledger__status--held{color:var(--red)} .ledger__foot{grid-column:1/-1;margin-top:clamp(1.8rem,3vw,2.6rem);display:flex; justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap} @media(max-width:980px){ .ledger__labels{display:none} .ledger__row{grid-template-columns:1fr 1fr;gap:.5rem 1.2rem;padding:1.4rem 0} .ledger__name{grid-column:1/-1;order:-1;font-size:var(--step-2)} .ledger__status{text-align:left}} .home-close{padding-block:clamp(4.5rem,9vw,9rem);background:var(--surface)} .home-close__inner{grid-column:2/11} .home-close__inner .statement{max-width:13ch;margin-top:1rem} .home-close__copy{max-width:44ch;margin-top:1.5rem;font-family:var(--font-serif);font-size:var(--step-1);line-height:1.6;color:var(--text-soft)} .home-close__actions{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.2rem} @media(max-width:900px){.home-close__inner{grid-column:1/-1}} /* ============================================================ NEWS — a lead story over a three-up grid. Built on real posts so it works as an SEO surface: dated, excerpted, one h1 in the hero and h2/h3 down the page. ============================================================ */ .news-lead{padding-block:var(--s-block);align-items:center} .news-lead__media{grid-column:1/8;grid-row:1} .news-lead__text{grid-column:9/13;grid-row:1} .news-lead__title{font-family:var(--font-display);font-size:var(--step-3); line-height:var(--lh-lead);letter-spacing:-.012em;color:var(--display-ink);margin:.9rem 0 1.1rem} .news-lead__excerpt{font-family:var(--font-serif);font-size:var(--step-0);line-height:1.72;color:var(--text-soft)} @media(max-width:1000px){.news-lead__media,.news-lead__text{grid-column:1/-1;grid-row:auto} .news-lead__text{margin-top:1.8rem}} .news-meta{display:flex;align-items:center;gap:.9rem;font-family:var(--font-ui); font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.18em} .news-meta__cat{color:var(--red)} .news-meta__date{color:var(--text-faint)} .news-meta__sep{width:14px;height:1px;background:var(--line-strong)} .news-grid{padding-block:0 var(--s-block)} .news-grid__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline; gap:2rem;flex-wrap:wrap;padding-bottom:1.2rem;border-bottom:1px solid var(--line-strong); margin-bottom:clamp(2rem,4vw,3rem)} .news-grid__title{font-family:var(--font-display);font-size:var(--step-2);color:var(--display-ink)} .news-card{grid-column:span 4;display:block;color:inherit} .news-card figure{aspect-ratio:3/2;margin-bottom:1.1rem} .news-card figure img{transition:transform 1.1s var(--ease-mat)} .news-card:hover figure img{transform:scale(1.04)} .news-card__title{font-family:var(--font-display);font-size:var(--step-1);line-height:1.3; color:var(--display-ink);margin:.8rem 0 .6rem;transition:color var(--dur-fast)} .news-card:hover .news-card__title{color:var(--red)} .news-card__excerpt{font-family:var(--font-serif);font-size:.92rem;line-height:1.65;color:var(--text-soft)} .news-card--empty figure{background:var(--stone-deep)} .news-card--empty .news-card__title{color:var(--text-faint);font-style:italic} @media(max-width:900px){.news-card{grid-column:span 6}} @media(max-width:600px){.news-card{grid-column:1/-1}} /* ============================================================ PRESS ============================================================ */ .press-lead{padding-block:var(--s-block)} .press-lead__statement{grid-column:1/11} @media(max-width:900px){.press-lead__statement{grid-column:1/-1}} .awards{padding-block:var(--s-block);background:var(--surface)} .awards__h{grid-column:1/-1;font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft); padding-bottom:1.2rem;border-bottom:1px solid var(--line-strong)} .award{grid-column:span 6;padding-top:clamp(1.8rem,3vw,2.6rem)} .award__year{font-family:var(--font-mono);font-size:var(--step--1);color:var(--red);letter-spacing:.08em} .award__title{margin-top:.7rem;font-family:var(--font-display);font-size:var(--step-2); line-height:1.16;color:var(--display-ink)} .award__body{margin-top:1rem;max-width:44ch;font-size:.95rem;color:var(--text-soft);line-height:1.65} @media(max-width:820px){.award{grid-column:1/-1}} .press-list{padding-block:var(--s-block)} .press-item{grid-column:1/-1;display:grid;grid-template-columns:1fr 4fr 1.4fr;gap:var(--grid-gap); align-items:baseline;padding:clamp(1.2rem,2.2vw,1.8rem) 0;border-top:1px solid var(--line)} .press-item:last-child{border-bottom:1px solid var(--line)} .press-item__date{font-family:var(--font-mono);font-size:var(--step--1);color:var(--text-faint);letter-spacing:.06em} .press-item__title{font-family:var(--font-display);font-size:var(--step-1);line-height:1.25;color:var(--display-ink)} .press-item__src{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.16em;color:var(--text-soft);text-align:right} .press-item--empty .press-item__title{color:var(--text-faint);font-style:italic} @media(max-width:760px){.press-item{grid-template-columns:1fr 1fr} .press-item__title{grid-column:1/-1;order:-1}.press-item__src{text-align:left}} /* ============================================================ THE FIRM ============================================================ */ .firm-lead{padding-block:var(--s-block)} .firm-lead__statement{grid-column:1/11} .firm-lead__body{grid-column:2/8;margin-top:clamp(2rem,4vw,3.2rem); font-family:var(--font-serif);font-size:var(--step-1);line-height:1.65;color:var(--text-soft)} .firm-lead__body p + p{margin-top:1.3em} @media(max-width:900px){.firm-lead__statement,.firm-lead__body{grid-column:1/-1}} .founder{padding-block:var(--s-block)} .founder__media{grid-column:1/5} .founder__text{grid-column:6/12;align-self:center} .founder__quote{font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-lead); letter-spacing:-.012em;color:var(--display-ink)} .founder__quote em{font-style:italic} .founder__name{margin-top:clamp(1.8rem,3vw,2.4rem);font-family:var(--font-ui);font-size:var(--t-micro); font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft)} .founder__role{margin-top:.5rem;font-family:var(--font-serif);font-size:var(--step-0);color:var(--text-soft)} .founder__bio{max-width:52ch;margin-top:1.5rem;font-family:var(--font-serif);font-size:var(--step-0);line-height:1.7;color:var(--text-soft)} .founder__bio p + p{margin-top:1.1em} @media(max-width:900px){.founder__media,.founder__text{grid-column:1/-1}.founder__text{margin-top:2.2rem}} .firm-film{position:relative;height:clamp(420px,76svh,820px);overflow:hidden;background:var(--ink)} .firm-film video{width:100%;height:100%;object-fit:cover;display:block} .firm-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,7,6,.62))} .firm-film__caption{position:absolute;z-index:3;left:var(--gutter);bottom:clamp(2rem,4vw,3.5rem);max-width:34ch; font-family:var(--font-display);font-size:var(--step-2);line-height:1.15;color:#fff} .hero-media-toggle--band{bottom:clamp(2rem,4vw,3.5rem)} .firm-capabilities{width:100%;margin:0 0 2rem;padding:0;list-style:none;border-top:1px solid var(--line-strong)} .firm-capabilities li{padding:.85rem 0;border-bottom:1px solid var(--line);font-family:var(--font-ui); font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--text-soft)} .firm-proof{padding-block:var(--s-block);background:var(--surface)} .firm-proof__head{grid-column:1/6}.firm-proof__head .statement{font-size:var(--step-3);margin-top:1rem} .firm-proof__list{grid-column:7/13;list-style:none} .firm-proof__list li{display:grid;grid-template-columns:3rem 1fr;gap:1rem;padding:1.2rem 0;border-top:1px solid var(--line); font-family:var(--font-serif);font-size:var(--step-1);line-height:1.45;color:var(--text)} .firm-proof__list li:last-child{border-bottom:1px solid var(--line)} .firm-proof__list span{font-family:var(--font-mono);font-size:var(--t-micro);letter-spacing:.14em;color:var(--red)} .firm-close{padding-block:clamp(4rem,8vw,8rem);text-align:center} .firm-close__inner{grid-column:2/12}.firm-close__inner .statement{margin-inline:auto;max-width:15ch} .firm-close__actions{display:flex;justify-content:center;flex-wrap:wrap;gap:1rem 2rem;margin-top:2.5rem} @media(max-width:900px){.firm-proof__head,.firm-proof__list,.firm-close__inner{grid-column:1/-1}.firm-proof__list{margin-top:2rem}} .partners{padding-block:var(--s-block)} .partners__h{grid-column:1/-1;font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft); padding-bottom:1.2rem;border-bottom:1px solid var(--line-strong);margin-bottom:.4rem} .partner{grid-column:span 3;padding:clamp(1.4rem,2.4vw,2rem) 0;border-bottom:1px solid var(--line)} .partner__name{font-family:var(--font-display);font-size:var(--step-1);line-height:1.2;color:var(--display-ink)} .partner__role{margin-top:.5rem;font-family:var(--font-ui);font-size:var(--t-micro); letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)} @media(max-width:900px){.partner{grid-column:span 6}} @media(max-width:560px){.partner{grid-column:1/-1}} /* ============================================================ RESIDENCES — the 111W57 register, pushed further than the home. Type larger, margins tighter, images either full-bleed or small, never medium. Nothing here is a listing: it is a showcase. ============================================================ */ .res-open{padding-block:clamp(4.5rem,10vw,10rem)} .res-open__statement{grid-column:1/12;font-family:var(--font-display);font-weight:400; font-size:clamp(2.6rem, 1.1rem + 5.6vw, 7rem);line-height:1.02;letter-spacing:-.022em; color:var(--display-ink);text-wrap:pretty} .res-open__sub{grid-column:1/7;margin-top:clamp(2rem,4vw,3.4rem); font-family:var(--font-serif);font-size:var(--step-1);line-height:1.6;color:var(--text-soft)} @media(max-width:900px){.res-open__statement,.res-open__sub{grid-column:1/-1}} /* the buildings, as a typeset index — the one component on the site that owes nothing to either reference and needs no photograph to exist */ .res-index{padding-block:var(--s-block)} .res-index__head{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline; gap:2rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line-strong);margin-bottom:.4rem} .res-index__title{font-family:var(--font-display);font-size:var(--step-2);color:var(--display-ink)} .res-index__total{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.14em; text-transform:uppercase;color:var(--text-soft)} .res-row{grid-column:1/-1;display:grid;grid-template-columns:minmax(90px,1fr) 4fr 2.4fr 2fr; gap:var(--grid-gap);align-items:baseline;padding:clamp(1.3rem,2.4vw,2rem) 0; border-bottom:1px solid var(--line)} .res-row__n{font-family:var(--font-display);font-size:var(--step-2);color:var(--red); line-height:1;font-feature-settings:"tnum" 1} .res-row__n small{display:block;margin-top:.5rem;font-family:var(--font-ui);font-size:var(--t-micro); font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)} .res-row__name{font-family:var(--font-display);font-size:var(--step-2);line-height:1.15;color:var(--display-ink)} .res-row__place,.res-row__note{font-family:var(--font-ui);font-size:var(--step--1); line-height:1.6;color:var(--text-soft)} .res-row__note{text-align:right} @media(max-width:820px){ .res-row{grid-template-columns:1fr 1fr;gap:.6rem 1.2rem} .res-row__name{grid-column:1/-1;order:-1} .res-row__note{text-align:left}} /* typologies — small, technical, mono */ .res-spec{padding-block:var(--s-block)} .res-spec__h{grid-column:1/-1;font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft); padding-bottom:1rem;border-bottom:1px solid var(--line-strong);margin-bottom:.4rem} .res-spec__row{grid-column:1/-1;display:grid;grid-template-columns:2fr 1fr 3fr;gap:var(--grid-gap); padding:1.1rem 0;border-bottom:1px solid var(--line);align-items:baseline} .res-spec__k{font-family:var(--font-display);font-size:var(--step-1);color:var(--display-ink)} .res-spec__v{font-family:var(--font-mono);font-size:var(--step--1);letter-spacing:.08em;color:var(--red)} .res-spec__d{font-family:var(--font-ui);font-size:var(--step--1);color:var(--text-soft);line-height:1.6} @media(max-width:700px){.res-spec__row{grid-template-columns:1fr 1fr}.res-spec__d{grid-column:1/-1}} /* ---- feature block: BIG image, text alongside ---- Replaces the small-image duo. On an 1800px grid a four-column figure came out at 530px with 250–650px of dead space under it — the "small or full-bleed, never medium" rule only works when the small thing is genuinely small AND something else holds the row. Seven columns of photograph holds it. */ .res-feature{padding-block:var(--s-block);align-items:center} /* grid-row:1 on both is load-bearing. In the flipped variant the media sits in columns 6–13 but comes first in the DOM; sparse auto-placement will not send the following text back to columns 1–5 of the same row, so it drops to a second row and opens ~450px of dead space. Pin the row explicitly. */ .res-feature__media{grid-column:1/8;grid-row:1} .res-feature__text{grid-column:9/13;grid-row:1} .res-feature--flip .res-feature__media{grid-column:6/13;grid-row:1} .res-feature--flip .res-feature__text{grid-column:1/5;grid-row:1} .res-feature__text .statement{font-size:var(--step-3);line-height:var(--lh-lead); margin-bottom:clamp(1.4rem,2.4vw,2rem)} .res-feature__body{font-family:var(--font-serif);font-size:var(--step-0);line-height:1.72; color:var(--text-soft)} .res-feature__body p + p{margin-top:1.1em} .res-feature__body b{color:var(--text);font-weight:600} @media(max-width:1000px){ .res-feature__media,.res-feature__text, .res-feature--flip .res-feature__media,.res-feature--flip .res-feature__text{grid-column:1/-1;grid-row:auto} .res-feature__text{margin-top:clamp(1.6rem,4vw,2.4rem)}} /* the specification — what is in every apartment */ .res-kit{padding-block:var(--s-block);background:var(--surface)} .res-kit__head{grid-column:1/6} .res-kit__head .statement{font-size:var(--step-3);line-height:var(--lh-lead)} .res-kit__list{grid-column:7/13;list-style:none} .res-kit__list li{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--grid-gap); padding:clamp(1rem,1.8vw,1.4rem) 0;border-top:1px solid var(--line);align-items:baseline} .res-kit__list li:last-child{border-bottom:1px solid var(--line)} .res-kit__k{font-family:var(--font-display);font-size:var(--step-1);color:var(--display-ink);line-height:1.25} .res-kit__v{font-family:var(--font-ui);font-size:var(--step--1);line-height:1.65;color:var(--text-soft)} @media(max-width:900px){.res-kit__head,.res-kit__list{grid-column:1/-1} .res-kit__list{margin-top:2rem}.res-kit__list li{grid-template-columns:1fr} .res-kit__v{margin-top:.4rem}} /* legacy duo — kept only so older markup does not collapse */ .res-duo{padding-block:var(--s-block)} .res-duo__small{grid-column:2/6} .res-duo__text{grid-column:7/12;align-self:center} .res-duo--flip .res-duo__small{grid-column:8/12} .res-duo--flip .res-duo__text{grid-column:2/7} .res-duo__text .statement{font-size:var(--step-3);line-height:var(--lh-lead)} /* the body copy is what stops the column reading as a hole */ .res-duo__body{margin-top:clamp(1.4rem,2.6vw,2.2rem);max-width:46ch; font-family:var(--font-serif);font-size:var(--step-0);line-height:1.7;color:var(--text-soft)} /* wide variant: statement left, list right, both anchored */ .res-duo--wide .res-duo__text{grid-column:1/6;align-self:center} .res-duo--wide .res-list{grid-column:7/13} .res-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)} .res-list li{padding:clamp(1rem,1.8vw,1.4rem) 0;border-bottom:1px solid var(--line); font-family:var(--font-serif);font-size:var(--step-0);line-height:1.65;color:var(--text-soft)} .res-list b{font-weight:400;color:var(--text)} @media(max-width:900px){.res-duo__small,.res-duo__text, .res-duo--flip .res-duo__small,.res-duo--flip .res-duo__text, .res-duo--wide .res-duo__text,.res-duo--wide .res-list{grid-column:1/-1} .res-duo__text{margin-top:2rem}} .res-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap); padding:0 var(--gutter) var(--s-block);max-width:var(--container-wide);margin-inline:auto} @media(max-width:760px){.res-strip{grid-template-columns:1fr}} .res-close{padding-block:clamp(4rem,9vw,9rem);text-align:center} .res-close__inner{grid-column:2/12} .res-close blockquote{font-family:var(--font-display); font-size:clamp(2rem, 1rem + 3.6vw, 4.6rem);line-height:1.06;letter-spacing:-.02em; color:var(--display-ink)} .res-close .dispatch{margin-inline:auto;margin-top:clamp(2.2rem,4vw,3.4rem)} @media(max-width:900px){.res-close__inner{grid-column:1/-1}} /* ============================================================ CONTACT — office block left, form right ============================================================ */ .contact-main{align-items:start} .contact-main__text{grid-column:1/6} .contact-main__form{grid-column:7/13} @media(max-width:900px){.contact-main__text,.contact-main__form{grid-column:1/-1} .contact-main__form{margin-top:clamp(2.5rem,7vw,4rem)}} .contact-card{margin-top:clamp(2rem,4vw,3rem);padding-top:1.6rem;border-top:1px solid var(--line-strong)} .contact-card__h{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--text-soft);margin-bottom:1rem} .contact-card address{font-style:normal;font-family:var(--font-serif);font-size:var(--step-1);line-height:1.7} .contact-card__line{margin-top:.7rem;font-family:var(--font-serif);font-size:var(--step-1)} .contact-card__line a{border-bottom:1px solid var(--red);padding-bottom:.15em} .contact-card__line a:hover{color:var(--red)} .contact-note{margin-top:clamp(1.6rem,3vw,2.2rem);max-width:38ch;font-size:.92rem;color:var(--text-soft)} /* --- the form --- */ .cform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .cform__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)} @media(max-width:560px){.cform__row{grid-template-columns:1fr}} .cform__field{margin-bottom:clamp(1.1rem,2vw,1.6rem)} .cform__field label{display:block;margin-bottom:.5rem;font-family:var(--font-ui); font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--text-soft)} .cform__field label span{color:var(--red)} .cform__field input,.cform__field select,.cform__field textarea{ width:100%;padding:.95em 1em;background:var(--surface);color:var(--text); border:1px solid var(--line-strong);border-radius:var(--radius); font-family:var(--font-serif);font-size:var(--step-0);line-height:1.4; transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease)} .cform__field textarea{resize:vertical;min-height:9em} .cform__field select{appearance:none;background-image: linear-gradient(45deg,transparent 50%,var(--text-soft) 50%), linear-gradient(135deg,var(--text-soft) 50%,transparent 50%); background-position:calc(100% - 20px) center,calc(100% - 15px) center; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:3em} .cform__field input:focus,.cform__field select:focus,.cform__field textarea:focus{ outline:none;border-color:var(--red);background:#fff} .cform__submit{margin-top:.6rem;display:inline-flex;align-items:stretch;min-width:200px;height:44px; background:none;cursor:pointer;padding:0; border:1px solid var(--line-strong);color:var(--text-soft); transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)} .cform__submit .dispatch__arrow{width:44px} .cform__submit:hover{color:var(--red);border-color:var(--red)} .cform__submit:hover .dispatch__arrow{border-color:var(--red)} .cform__submit:hover .dispatch__arrow::before{transform:translateX(3px)} .cform__submit:disabled{opacity:.55;cursor:wait;color:var(--text-soft);border-color:var(--line-strong)} .cform__privacy{max-width:58ch;margin-top:1rem;font-family:var(--font-ui);font-size:var(--t-micro);line-height:1.55;color:var(--text-soft)} .cform__privacy a{border-bottom:1px solid currentColor} .form-note{margin-bottom:2rem;padding:1.1em 1.3em;font-family:var(--font-serif); font-size:var(--step-0);border-left:2px solid var(--red)} .form-note--ok{background:var(--surface);color:var(--text)} .form-note--err{background:var(--surface);color:var(--red)} .form-note a{border-bottom:1px solid currentColor} .legal-copy{padding-block:var(--s-block)} .legal-copy__inner{grid-column:3/10;font-family:var(--font-serif);font-size:var(--step-0);line-height:1.75;color:var(--text-soft)} .legal-copy__inner h2{margin:2.2em 0 .65em;font-family:var(--font-display);font-size:var(--step-2);font-weight:400;line-height:1.2;color:var(--display-ink)} .legal-copy__inner h2:first-child{margin-top:0}.legal-copy__inner a{border-bottom:1px solid var(--red);color:var(--text)} @media(max-width:900px){.legal-copy__inner{grid-column:1/-1}} /* --- scenographic plate + newsletter --- */ .plate{position:relative;overflow:hidden} .plate figure{aspect-ratio:16/9} .plate img{width:100%;height:116%;object-fit:cover;will-change:transform} @media(max-width:700px){.plate figure{aspect-ratio:4/3}} /* The page steps progressively darker toward the bottom: ground #EAEAE7 → newsletter #DEDEDA → footer #C7C9CA. That is what makes the footer read as a distinct block without going dark, which would kill the colour logo. */ .newsletter{background:var(--stone-deep)} .newsletter__inner{max-width:var(--container-wide);margin-inline:auto; padding:clamp(3.5rem,7vw,6.5rem) var(--gutter)} .newsletter h2{font-size:var(--step-3);line-height:var(--lh-lead);max-width:22ch; margin-bottom:clamp(2rem,3.5vw,3rem)} .newsletter__intro{max-width:46ch;font-family:var(--font-serif);font-size:var(--step-1);line-height:1.6;color:var(--text-soft)} .newsletter__actions{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:2rem} .newsletter__form{display:flex;gap:.6rem;max-width:520px;width:100%} .newsletter__form input{flex:1;padding:1.1em 1.3em;border:1px solid var(--line);background:#fff; border-radius:var(--radius);font-family:var(--font-ui);font-size:var(--step-0)} .newsletter__form button{padding:0 2em;background:var(--red);color:#fff;border:0;border-radius:var(--radius); font-family:var(--font-ui);font-weight:500;text-transform:uppercase;letter-spacing:.15em;font-size:var(--t-micro); cursor:pointer;transition:background var(--dur-fast)} .newsletter__form button:hover{background:var(--red)} .newsletter small{display:block;margin-top:1.1rem;color:var(--text-soft);font-size:.82rem} /* ============================================================ PROJECTS index + detail ============================================================ */ /* ---- Portfolio archive, SHVO: dark ground, uniform square cards, three up. The uniformity IS the effect — it reads as a catalogue rather than a magazine. Resist reintroducing varied ratios. ---- */ .proj-archive{background:var(--ink);color:var(--dark-text);padding-block:clamp(3rem,6vw,5rem) var(--s-block)} .proj-archive__bar{max-width:var(--container-wide);margin:0 auto clamp(2rem,4vw,3rem); padding-inline:var(--gutter);display:flex;justify-content:space-between;align-items:baseline;gap:2rem;flex-wrap:wrap} .proj-archive__label{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500; text-transform:uppercase;letter-spacing:.2em;color:var(--dark-text-soft)} .proj-index{max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter); display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.4vw,2.6rem) clamp(1rem,1.4vw,1.6rem)} .proj-card{position:relative;display:block;color:inherit} .proj-card__media{position:relative;overflow:hidden;background:#242628;aspect-ratio:1/1} .proj-card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-mat),opacity var(--dur-med)} .proj-card:hover .proj-card__media img{transform:scale(1.04);opacity:.86} .proj-card__title{margin-top:1.1rem;font-family:var(--font-ui);font-weight:600; font-size:clamp(.95rem,.85rem + .3vw,1.2rem);line-height:1.28;letter-spacing:.055em; text-transform:uppercase;color:#fff;transition:color var(--dur-fast)} .proj-card:hover .proj-card__title{color:var(--red-bright)} .proj-card__meta{margin-top:.35rem;font-family:var(--font-ui);font-size:var(--t-micro); font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--dark-text-soft)} .proj-card__index{position:absolute;top:.9rem;left:.9rem;z-index:2;font-family:var(--font-mono); font-size:var(--t-micro);letter-spacing:.12em;color:rgba(255,255,255,.72)} @media(max-width:900px){.proj-index{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.proj-index{grid-template-columns:1fr}} .statement--index{max-width:20ch} .pd-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;display:flex;align-items:flex-end;color:#fff} .pd-hero__media,.pd-hero__media img,.pd-hero__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .pd-hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,7,6,.35),rgba(8,7,6,.05) 40%,rgba(8,7,6,.72))} .pd-hero__inner{position:relative;z-index:2;width:100%;max-width:var(--container-wide);margin-inline:auto;padding:0 var(--gutter) clamp(2.5rem,6vh,5rem)} .pd-hero__eyebrow{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.85);display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem} .pd-hero__eyebrow::before{content:"";width:40px;height:2px;background:var(--red-bright)} .pd-hero__title{font-size:var(--step-5);color:#fff;line-height:1} .pd-lead{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,6vw,6rem);align-items:start;padding-block:var(--s-block)} .pd-lead__intro{font-family:var(--font-display);font-size:var(--step-3);line-height:var(--lh-lead)} .pd-spec{border-top:2px solid var(--ink)} .pd-spec__row{display:grid;grid-template-columns:1fr 1.3fr;gap:1rem;padding:.95rem 0;border-bottom:1px solid var(--line)} .pd-spec__k{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--text-faint)} .pd-spec__v{font-size:var(--step-0)} @media(max-width:820px){.pd-lead{grid-template-columns:1fr}} .pd-flow{display:flex;flex-direction:column;gap:clamp(2.5rem,6vw,5rem)} .pd-band{display:grid;gap:clamp(1.2rem,3vw,2.2rem);align-items:center} .pd-band--duo{grid-template-columns:1fr 1fr} .pd-band--offset{grid-template-columns:1.5fr 1fr} .pd-band--offset-r{grid-template-columns:1fr 1.5fr} .pd-band--text-img{grid-template-columns:.8fr 1.2fr} .pd-band p{color:var(--text-soft);max-width:44ch;font-family:var(--font-serif);font-size:var(--step-1)} .pd-fig{position:relative}.pd-fig .credit{position:absolute;right:0;bottom:-1.6rem} @media(max-width:760px){.pd-band--duo,.pd-band--offset,.pd-band--offset-r,.pd-band--text-img{grid-template-columns:1fr}} /* dense body columns beside the photographs — the thin captions of v4 left the page feeling unfinished. These are meant to fill their column. */ .pd-body{font-family:var(--font-serif);font-size:var(--step-0);line-height:1.72; color:var(--text-soft);max-width:46ch} .pd-body p + p{margin-top:1.15em} .pd-body b{color:var(--text);font-weight:600} .pd-lede{grid-column:2/11;font-family:var(--font-serif);font-size:var(--step-1); line-height:1.6;color:var(--text-soft);margin-top:clamp(1.8rem,3vw,2.6rem);max-width:62ch} @media(max-width:900px){.pd-lede{grid-column:1/-1}} /* the pull-quote, with the mill drawn full width beneath it */ .pd-quote--mill{position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6rem) 0; background:var(--surface)} /* The measure MUST live on the blockquote, not on the wrapper. `ch` resolves against the element's OWN font-size: 26ch on a 16px wrapper is 190px, and setting 67px display type into 190px gives one word per line and a quote two screens tall. This is the same trap that broke the greige panel in v3 — do not move max-width back up to the container. */ .pd-quote--mill .pd-quote__inner{position:relative;z-index:2; margin-inline:auto;text-align:center;padding-inline:var(--gutter)} .pd-quote--mill blockquote{font-family:var(--font-display); font-size:clamp(1.9rem,1rem + 3.2vw,4.2rem);line-height:1.08;letter-spacing:-.018em; color:var(--display-ink);max-width:19ch;margin-inline:auto;text-wrap:balance} .pd-quote--mill cite{display:block;margin-top:clamp(1.6rem,3vw,2.4rem);font-family:var(--font-ui); font-style:normal;font-size:var(--t-micro);font-weight:500;text-transform:uppercase; letter-spacing:.2em;color:var(--text-soft)} .mill-elevation-wrap{position:relative;z-index:1;width:100%; margin-top:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(2rem,4vw,3.5rem); color:var(--red);opacity:.30;pointer-events:none} .mill-elevation{display:block;width:100%;height:auto} @media(max-width:700px){.mill-elevation-wrap{opacity:.22}} .pd-quote{max-width:22ch;margin-inline:auto;padding-block:clamp(2rem,5vw,4rem)} .pd-quote blockquote{font-family:var(--font-display);font-size:var(--step-4);line-height:var(--lh-statement)} .pd-quote cite{display:block;margin-top:1.4rem;font-family:var(--font-mono);font-style:normal;font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;color:var(--text-faint)} .pd-next{position:relative;height:64svh;min-height:420px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff} .pd-next img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-mat)} .pd-next:hover img{transform:scale(1.05)} .pd-next__scrim{position:absolute;inset:0;background:rgba(8,7,6,.5)} .pd-next__inner{position:relative;z-index:2} .pd-next__kicker{font-family:var(--font-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.22em;color:rgba(255,255,255,.8);margin-bottom:1rem} .pd-next__title{font-size:var(--step-4);color:#fff} /* ============================================================ FOOTER (Tishman — oxblood, stripes, columns) ============================================================ */ /* Light footer. The oxblood full-bleed footer was another of the reference's signatures, and the colour logo is red-on-silver — it disappeared on dark red. Light ground solves both: the mark can run large and in colour, and one more tell is gone. The oxblood survives where it is strongest, on the mid-page panel. */ /* Oxblood, carrying the same fine diagonal weave that sits behind the nav overlay — so closing the menu and arriving at the footer read as one surface. The colour lockup cannot survive on this ground (red on dark red); the white one does, and larger than before. */ .site-footer{background:var(--red-deep);color:var(--dark-text);position:relative;overflow:hidden; padding-block:clamp(4.5rem,9vw,7.5rem)} .site-footer::before{content:"";position:absolute;inset:0;pointer-events:none; background:repeating-linear-gradient(var(--stripe-angle), rgba(255,255,255,.055) 0 9px,rgba(255,255,255,0) 9px 26px)} .site-footer .motif{top:auto;bottom:0;right:calc(var(--gutter) * .6); color:#fff;opacity:.14;width:clamp(150px,16vw,250px)} .footer-top{position:relative;z-index:2;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:clamp(1.5rem,4vw,3.5rem); padding-bottom:var(--s-2xl);border-bottom:1px solid var(--dark-line)} /* The colour mark is red-on-silver and vanishes on oxblood (2.4:1). It rides on a stone plate instead — a plaque set into the dark footer, which also reads as a nod to the bronze plaque on a restored building. Keeps the red footer AND a full-colour logo, which cannot otherwise coexist. */ .footer-brand{align-self:start} .footer-plate{display:inline-block;background:var(--stone); padding:clamp(1rem,1.8vw,1.6rem) clamp(1.3rem,2.4vw,2.2rem); box-shadow:0 18px 50px -24px rgba(0,0,0,.55)} .footer-plate img{display:block;height:clamp(46px,5.4vw,72px);width:auto} .footer-col .h{font-family:var(--font-ui);font-size:var(--t-micro);font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--dark-text-soft);margin-bottom:1.1rem} /* :not() keeps this away from the button. `.footer-col a` is (0,1,1) and beats `.footer-contact-btn` (0,1,0), so without the exclusion it forced display:block and painted the button's bottom border transparent — the box looked cut off. */ .footer-col a,.footer-col p{display:block;color:var(--dark-text);line-height:2;font-size:.95rem} .footer-col a:not(.footer-contact-btn){border-bottom:1px solid transparent;width:max-content} .footer-col a.footer-contact-btn{display:inline-flex;line-height:1} .footer-col a:hover{border-color:#fff;color:#fff} .footer-contact-btn{display:inline-flex;align-items:center;justify-content:center;min-width:165px;height:32px; border:1px solid rgba(255,255,255,.42);border-radius:var(--radius);color:rgba(255,255,255,.86);font-family:var(--font-ui); font-weight:500;text-transform:uppercase;letter-spacing:.15em;font-size:var(--t-micro); transition:border-color var(--dur-fast),color var(--dur-fast),background var(--dur-fast)} .footer-contact-btn:hover{border-color:#fff;color:var(--red-deep);background:#fff} .footer-legal{position:relative;z-index:2;margin-top:var(--s-l);display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center} .footer-legal a{font-family:var(--font-ui);font-size:var(--t-micro);letter-spacing:.08em;color:var(--dark-text-soft)} .footer-legal a:hover{color:#fff} .footer-copy{margin-top:1.5rem;font-family:var(--font-ui);font-size:var(--t-micro);letter-spacing:.08em;color:var(--dark-text-soft)} @media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr;gap:2.5rem}.footer-brand{grid-column:1/-1}} /* ============================================================ "Personalizza" — video slots. A slot can hold a photo OR a video; when it's a video, make the