/* ══════════════════════════════════════════════════════════════ LA MAISON DE STEFANIE A cinematic perfume story. Near-black ground, warm ivory type, antique gold used only where something is alive. Chiaroscuro: one warm source, everything else falling into shadow. ══════════════════════════════════════════════════════════════ */ /* ── 1. TOKENS ─────────────────────────────────────────────── */ :root{ /* ground */ --noir:#0A0705; --soot:#0F0B08; --char:#161009; --char-2:#1D150E; /* cream panels — daylight through the shop door */ --cream:#EDE5D6; --cream-2:#E1D6C2; --ink:#241C16; /* type */ --ivory:#F3EDE2; --ivory-2:#E6DCCC; --dim:#B8A892; --dimmer:#A6947E; /* metal and glass */ --gold:#B99358; --gold-lit:#DCBF8B; --amber:#C98A3A; /* the same gold, darkened just enough for small text on the paper ground */ --gold-ink:#82591C; --rose:#C2818A; --burgundy:#6E2333; /* Struck copper. A flat ramp reads as paint; metal is a narrow bright band where the light actually catches, a dark band under it where the room is reflected, and a warm bounce off whatever the piece is lying on. Two gradients: one down it for the turn of the surface, one across it for its curve. */ --metal-sheen:linear-gradient(92deg,rgba(26,10,2,.26) 0%, rgba(255,236,206,.1) 22%,rgba(255,240,214,.14) 50%, rgba(255,236,206,.08) 76%,rgba(26,10,2,.3) 100%); --metal:var(--metal-sheen), linear-gradient(177deg,#FEEDD2 0%,#F2CB9A 6%,#DC9C62 18%, #EFBE8C 29%,#C87C41 40%,#9A5326 50%, #6E3417 60%,#8E4A22 68%,#B87440 78%, #DCA169 88%,#F5D6AA 96%,#FDEAC9 100%); --metal-lit:var(--metal-sheen), linear-gradient(177deg,#FFF6E6 0%,#F9DCB6 6%,#EBB37D 18%, #FAD3A8 29%,#D9904F 40%,#AF6531 50%, #84431E 60%,#A75C2C 68%,#CE8A51 78%, #ECBA81 88%,#FBE5C2 96%,#FFF3DC 100%); --metal-edge:inset 0 1px 0 rgba(255,248,232,.92), inset 0 -1px 0 rgba(44,18,4,.8), inset 0 0 0 1px rgba(124,62,22,.55); --metal-ink:#1C1007; /* edges */ --edge:rgba(243,237,226,.11); --edge-2:rgba(243,237,226,.2); --edge-ink:rgba(36,28,22,.16); /* type stacks */ /* Playfair Display draws its Greek with the same hand as its Latin, so ΙΣΤΟΡΙΑ and STORY are one typeface. The headline used to be Bodoni for Latin and GFS Didot for Greek — two faces, visibly different widths and weights, on the same line of the same site. */ --display:"Playfair Display",Didot,'Times New Roman',Georgia,serif; --serif:"Cormorant Garamond",Georgia,serif; --sans:"Commissioner",system-ui,-apple-system,"Segoe UI",sans-serif; --hand:"Caveat","Cormorant Garamond",cursive; --fancy:var(--display); /* ── SPACING ── One scale. Nothing off it. Space inside a group is always smaller than the space between groups, which is what makes a page read as composed rather than as a list of things that happen to be near each other. */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; /* ── TYPE SCALE ── A 1.333 fourth, editorial. Each step is fluid between a phone and a wide desktop, so there is one ladder rather than a clamp invented at each call site. */ /* The bottom of this ladder sets the smallest type on the site, so it is pinned to the house floor: nothing visible under 12px, running text never under 16.5px. At 390px the rungs now land at 12.5, 14.9 and 17.0; they were at 11.8, 14.1 and 16.4. */ --t-micro:clamp(.78rem,.74rem + .18vw,.92rem); /* labels, eyebrows */ --t-small:clamp(.92rem,.88rem + .22vw,1.06rem); /* captions, notes */ --t-body:clamp(1.06rem,.99rem + .30vw,1.22rem); /* running text */ --t-lede:clamp(1.18rem,1.08rem + .46vw,1.44rem); /* standfirsts */ --t-h4:clamp(1.12rem,1.02rem + .50vw,1.42rem); --t-h3:clamp(1.40rem,1.20rem + 1.00vw,1.90rem); --t-h2:clamp(1.90rem,1.45rem + 2.25vw,3.30rem); --t-h1:clamp(2.40rem,1.60rem + 3.70vw,4.80rem); /* line-height and tracking move opposite to size: large type wants less of both, small caps want a great deal of tracking to stay legible */ --lh-tight:1.06; --lh-head:1.16; --lh-body:1.62; --tr-head:-.012em; --tr-caps:.2em; --tr-micro:.26em; /* ── RADIUS ── Soft throughout. The pill is for anything that reads as a control. */ --r-xs:6px; --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px; --r-pill:999px; /* rhythm */ --pad:clamp(1.25rem,4.5vw,5rem); --gap:clamp(2.5rem,6vw,6rem); --sec:clamp(4.2rem,9vw,8rem); --lab:var(--t-micro); --e:cubic-bezier(.22,.61,.36,1); --slow:cubic-bezier(.16,.84,.28,1); --rail:0px; } @media (min-width:1180px){ :root{ --rail:4.5rem } } *,*::before,*::after{box-sizing:border-box} /* A display face with an optical-size axis gets to use it, so a headline keeps its hairlines and a 10px label does not */ h1,h2,h3,h4,.wordmark,.h-display,.monogram{font-optical-sizing:auto} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--noir); color:var(--ivory); font-family:var(--sans); font-weight:300; font-size:var(--t-body); line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,video,svg{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* a browser gives every button about six pixels of its own padding, which is enough to push a product's name off the edge everything else on the card is aligned to — the commonest way a layout looks almost right */ button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer} h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.05;font-family:var(--display)} h1.chap-title{font-size:clamp(2.5rem,1.1rem + 3.7vw,4.8rem)} p{margin:0 0 1em} ul,ol{margin:0;padding:0;list-style:none} [hidden]{display:none!important} :focus-visible{outline:2px solid var(--gold-lit);outline-offset:3px;border-radius:1px} .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip{position:fixed;left:-9999px;top:0;z-index:600;background:var(--gold);color:#120E09; padding:.85rem 1.2rem;font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase} .skip:focus{left:.6rem;top:.6rem} /* ── 2. SHARED DEVICES ─────────────────────────────────────── */ .lab{font-size:var(--t-micro);font-weight:400;letter-spacing:var(--tr-micro); text-transform:uppercase;color:var(--dim);margin:0 0 var(--s5); display:flex;align-items:center;gap:var(--s3)} .lab::before{content:"";width:1.9rem;height:1px;background:var(--gold);flex:none} .lab.bare::before{display:none} .lab.mid{justify-content:center} .h-display{font-family:var(--display);text-transform:uppercase; font-size:var(--t-h2);letter-spacing:.03em;line-height:var(--lh-tight); text-wrap:balance} .h-display em{font-style:normal;color:var(--gold);display:block} .h-soft{font-family:var(--serif);font-weight:300;line-height:var(--lh-head); font-size:var(--t-h2);letter-spacing:var(--tr-head);text-wrap:balance} .h-soft em{font-style:italic;color:var(--gold-lit)} .body{color:var(--ivory-2);max-width:62ch;font-size:var(--t-body); line-height:var(--lh-body);text-wrap:pretty} .muted{color:var(--dim)} .rule{height:1px;background:linear-gradient(90deg,transparent,var(--edge-2),transparent);border:0;margin:0} .rule.short{width:3.5rem;background:var(--gold);opacity:.7;margin:1.6rem auto} .arrow{display:inline-grid;place-items:center;width:2.15rem;height:2.15rem;flex:none; border:1px solid currentColor;border-radius:50%;font-size:var(--t-micro); transition:transform .4s var(--e),border-color .3s,background .3s} .more{display:inline-flex;align-items:center;gap:var(--s3);min-height:2.75rem; font-size:var(--t-micro);letter-spacing:var(--tr-caps);text-transform:uppercase; transition:color .3s;color:var(--ivory)} .more:hover{color:var(--gold-lit)} .more:hover .arrow{transform:translateX(5px);border-color:var(--gold)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s3); min-height:3rem;padding:var(--s3) var(--s6);border-radius:var(--r-pill); font-size:var(--t-micro);letter-spacing:var(--tr-caps); text-transform:uppercase;position:relative;overflow:hidden; transition:background .35s var(--e),color .35s,border-color .35s, transform .12s var(--e)} .btn:active{transform:scale(.97)} .btn-solid{background:var(--metal);color:var(--metal-ink);font-weight:500; box-shadow:var(--metal-edge),0 8px 20px rgba(0,0,0,.42); text-shadow:0 1px 0 rgba(255,242,218,.5)} .btn-solid:active{box-shadow:var(--metal-edge),0 3px 10px rgba(0,0,0,.5)} .btn-line{border:1px solid var(--edge-2);color:var(--ivory)} .linky{display:inline-block;font-size:var(--t-small);letter-spacing:var(--tr-caps); text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--edge); padding:var(--s1) 0 var(--s1);transition:color .3s,border-color .3s} .stars{color:var(--gold-lit);letter-spacing:.24em;font-size:var(--t-micro)} /* the grain that sits over the whole page */ .grain{position:fixed;inset:-40%;z-index:250;pointer-events:none;opacity:.04;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.84' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grainshift 8s steps(6) infinite} @keyframes grainshift{ 0%,100%{transform:translate(0,0)}17%{transform:translate(-3%,-2%)}34%{transform:translate(2%,-4%)} 50%{transform:translate(-2%,3%)}67%{transform:translate(3%,1%)}84%{transform:translate(-1%,-3%)}} /* ── 3. REVEAL — only ever applied once JS is running ──────── */ .js .rv{opacity:0;transform:translateY(18px); transition:opacity 1s var(--slow),transform 1s var(--slow)} .js .rv.in{opacity:1;transform:none} .js .rv[data-d="1"]{transition-delay:.09s} .js .rv[data-d="2"]{transition-delay:.18s} .js .rv[data-d="3"]{transition-delay:.27s} /* ── 4. FIGURES — every picture sits in a fixed box, no shift ─ */ .fig{position:relative;overflow:hidden;background:var(--char);isolation:isolate; border-radius:var(--r-lg)} .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.1s var(--e)} .fig img.on{opacity:1} /* Every photograph on this page is lit from one side and falls away into the dark. Stefanie's own portrait is the exception — it was taken under a flash in a bright room — so the frame closes the corners for it and it sits in the page instead of jumping out of it. */ .fig::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(120% 100% at 62% 22%,rgba(201,138,58,.1),transparent 58%), radial-gradient(86% 76% at 50% 44%,transparent 46%,rgba(10,7,5,.52) 100%), linear-gradient(0deg,rgba(10,7,5,.5),transparent 55%)} .fig .ph{position:absolute;inset:0;display:grid;place-items:center;padding:1.5rem;text-align:center; font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer)} .fig figcaption{position:absolute;left:0;bottom:0;padding:1rem 1.2rem;z-index:2; font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--dim)} /* ── 5. HEADER ─────────────────────────────────────────────── */ .bar{position:fixed;inset:0 0 auto;z-index:200;display:flex;align-items:center;gap:1.25rem; padding:1rem var(--pad);transition:padding .3s var(--e)} .bar::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0; transition:opacity .5s var(--e);background:rgba(10,7,5,.88); -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-bottom:1px solid var(--edge)} .bar.stuck::before{opacity:1} .bar.stuck{padding-block:.7rem} /* the house's own name is never the thing that gets squeezed */ .mark{display:flex;align-items:center;gap:.85rem;flex:0 1 auto;min-width:0; min-height:2.75rem} @media (min-width:1240px){ .bar .mark{flex:none} } /* Her own mark: the flacon from the plaque on her bottle, on a plaque of its own. The wordmark is set the way her label sets it — title case in the display serif with the "de" in italic — and at a size that reads as the name of the house rather than a caption. */ .flacon{width:2.8rem;height:2.17rem;flex:none;display:grid;place-items:center; color:var(--gold-lit);transition:color .4s} .flacon svg{width:100%;height:100%;display:block} .wordmark{font-family:var(--display);font-size:clamp(1.04rem,.92rem + .52vw,1.34rem); letter-spacing:-.005em;line-height:1.12;white-space:nowrap;color:#F7F2E9} .wordmark em{font-style:italic;color:var(--gold-lit)} .wordmark small{display:block;font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.3em; color:var(--dim);margin-top:.4rem;text-transform:uppercase} /* below this the wordmark stops being one line, or it walks the language switch and the menu button straight off the screen */ @media (max-width:600px){ .mark{gap:.55rem} .flacon{width:2.2rem;height:1.71rem} .wordmark{white-space:normal;font-size:.98rem;line-height:1.18;max-width:7.6rem} .wordmark small{font-size:var(--t-micro);letter-spacing:.26em;margin-top:.24rem} .tools{gap:.6rem} .lang{font-size:var(--t-micro)} } /* The five pages sit in a track, one pill each, and the one you are on is struck copper — the same metal as the pills and the chosen category on the shelf. */ /* Five separate tabs, each one copper in its own right: a copper edge, a breath of copper behind it and copper lettering. The page you are reading is the one struck solid. */ .nav{display:flex;align-items:center;gap:var(--s2);margin-inline:auto} .nav a{position:relative;display:inline-flex;align-items:center; min-height:2.4rem;padding:0 clamp(var(--s4),1.3vw,var(--s5)); border-radius:var(--r-pill); border:1px solid rgba(186,118,62,.5); background:linear-gradient(177deg,rgba(214,150,92,.14),rgba(120,64,26,.1)); box-shadow:inset 0 1px 0 rgba(255,228,190,.14); font-size:var(--lab);letter-spacing:.13em;text-transform:uppercase; color:#E8C7A0;white-space:nowrap; transition:border-color .3s var(--e),background .3s var(--e), color .3s var(--e),box-shadow .3s var(--e)} @media (hover:hover) and (pointer:fine){ .nav a:hover{border-color:rgba(214,150,92,.85);color:#FAE6C8; background:linear-gradient(177deg,rgba(226,168,112,.26),rgba(140,78,32,.18)); box-shadow:inset 0 1px 0 rgba(255,236,206,.3),0 4px 14px rgba(62,32,10,.4)} } .nav a[aria-current]{background:var(--metal);color:var(--metal-ink);font-weight:500; border-color:rgba(110,64,26,.6); box-shadow:var(--metal-edge),0 5px 14px rgba(62,32,10,.5); text-shadow:0 1px 0 rgba(255,242,218,.5)} @media (hover:hover) and (pointer:fine){ .nav a[aria-current]:hover{background:var(--metal-lit);color:var(--metal-ink); border-color:rgba(110,64,26,.6)} } /* between the breakpoint and a wide screen everything pulls its elbows in so the five tabs, the house's name and the tools all fit on one line without any of them being cut */ @media (max-width:1460px){ .nav{gap:var(--s1)} .nav a{padding-inline:var(--s3);letter-spacing:.07em;min-height:2.2rem} .bar{gap:.7rem} .tools{gap:.45rem} .bar .btn{padding:.6rem .9rem;letter-spacing:.12em} .lang button{min-width:1.9rem;padding-inline:.1rem} } @media (max-width:1300px){ .nav a{padding-inline:var(--s2);letter-spacing:.05em} } .tools{display:flex;align-items:center;gap:.9rem;flex:none;margin-left:auto} .lang{display:flex;align-items:center;gap:.35rem;font-size:var(--t-micro);letter-spacing:.18em;color:var(--dimmer)} .lang button{padding:.35rem;min-width:2.5rem;min-height:2.75rem;transition:color .3s} .lang button[aria-pressed="true"]{color:var(--ivory)} .bar .btn{display:none} @media (min-width:1240px){ .bar .btn{display:inline-flex;min-height:2.6rem;padding:.6rem 1.25rem} } .burger{width:2.75rem;height:2.75rem;flex:none;border:1px solid var(--edge-2);border-radius:50%; display:none;place-items:center;align-content:center;gap:5px;transition:border-color .3s} .burger i{display:block;width:13px;height:1px;background:var(--ivory);transition:transform .3s var(--e)} body.menu .burger i:first-child{transform:translateY(3px) rotate(45deg)} body.menu .burger i:last-child{transform:translateY(-3px) rotate(-45deg)} @media (max-width:1239px){ .burger{display:grid} /* The menu is the screen, so it is set as the screen: five rows that share the height between them, each the full width of it with a hairline under it. Five pills floating in the middle left most of the page black and nothing to aim at; a row you read down fills it, and every name is a target the width of the phone. The pills are the track in the header. Here the track is gone, so everything that drew one — the border, the copper wash behind it, the rounded ends, the inner light — goes with it, and the page you are reading is simply the name in gold. */ .nav{position:fixed;inset:0;display:grid;grid-template-rows:repeat(5,1fr); align-items:stretch;gap:0;margin:0;border:0;border-radius:0; padding:calc(4.75rem + env(safe-area-inset-top,0px)) 0 max(env(safe-area-inset-bottom,0px),1.25rem) 0; background:rgba(8,5,4,.985); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); opacity:0;visibility:hidden;transition:opacity .4s var(--e),visibility .4s} .nav a{display:flex;align-items:center;justify-content:center; width:100%;min-height:0;padding:0 var(--pad); border:0;border-top:1px solid var(--edge);border-radius:0; background:none;box-shadow:none;white-space:normal;text-align:center; /* the name carries the row, so it is sized off the short side of the screen: on a tablet the rows are 200px deep and 1.8rem left them looking empty, and on a phone turned sideways they are 59px deep and anything sized off the width would not fit in one */ font-family:var(--display);font-size:clamp(1.25rem,4.6vmin,2.6rem); letter-spacing:.1em;text-transform:uppercase;color:var(--ivory)} .nav a:last-child{border-bottom:1px solid var(--edge)} @media (hover:hover) and (pointer:fine){ .nav a:hover{background:rgba(214,150,92,.06);border-color:var(--edge); color:#FAE6C8;box-shadow:none} } /* the four you could go to are set in the house ivory; the one you are reading is the gold one, which only reads as gold if the others are not nearly gold themselves */ .nav a[aria-current]{background:none;box-shadow:none;text-shadow:none; color:var(--gold-lit);font-weight:400} body.menu .nav{opacity:1;visibility:visible} } /* ── 6. THE CHAPTER RAIL ───────────────────────────────────── */ .chapters{position:fixed;right:calc(var(--pad) * .55);top:50%;transform:translateY(-50%); z-index:150;display:none;flex-direction:column;gap:.15rem;align-items:flex-end} @media (min-width:1180px){ .chapters{display:flex} } .chapters a{display:flex;align-items:center;gap:.7rem;padding:.42rem 0; font-size:var(--t-micro);letter-spacing:.2em;color:var(--dimmer);transition:color .35s} .chapters a span.n{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.14em} .chapters a span.t{max-width:0;overflow:hidden;white-space:nowrap;opacity:0; text-transform:uppercase;transition:max-width .3s var(--e),opacity .3s} .chapters a i{width:1.4rem;height:1px;background:currentColor;display:block; transition:width .45s var(--e)} .chapters a:hover,.chapters a.on{color:var(--gold-lit)} .chapters a:hover i,.chapters a.on i{width:2.4rem} .chapters a:hover span.t,.chapters a:focus-visible span.t{max-width:12rem;opacity:1} /* ══════════════════════════════════════════════════════════════ THE CURTAIN Her mark, then the flacon drawn in a single gold line, then the page. Every stroke is normalised with pathLength="1", so one rule animates paths of wildly different lengths and each carries its own delay and duration as a custom property. ══════════════════════════════════════════════════════════════ */ .curtain{position:fixed;inset:0;z-index:600;background:var(--noir); display:grid;place-items:center; transition:opacity .8s var(--e),visibility .8s} .curtain[hidden]{display:none} .curtain.gone{opacity:0;visibility:hidden;pointer-events:none} .curtain-in{display:grid;justify-items:center;gap:clamp(var(--s5),3.4vh,var(--s7)); padding:var(--s7);text-align:center} /* her own mark, the one already on her tab */ /* her own mark, cut out of the app icon so the icon's near-black tile does not sit as a lighter square on the curtain's black */ .curtain-mark{display:block;width:clamp(58px,8vh,74px);height:auto; opacity:0;animation:curtainIn .7s var(--e) .15s forwards} .curtain-bottle{width:auto;height:clamp(176px,38vh,300px);overflow:visible} .curtain-bottle path{ stroke:var(--gold-lit);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; vector-effect:non-scaling-stroke; stroke-dasharray:1;stroke-dashoffset:1; animation:draw var(--t,.6s) cubic-bezier(.65,0,.35,1) var(--d,0s) forwards} @keyframes draw{to{stroke-dashoffset:0}} .curtain-word{margin:0;font-family:var(--display);text-transform:uppercase; font-size:var(--t-h4);letter-spacing:.2em;color:var(--ivory); opacity:0;animation:curtainIn .8s var(--e) 2.35s forwards} .curtain-word small{display:block;margin-top:var(--s3); font-family:var(--sans);font-size:var(--t-micro);letter-spacing:.44em;color:var(--dim)} @keyframes curtainIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} /* asked for less movement, or no script: there is no curtain at all */ @media (prefers-reduced-motion:reduce){ .curtain{display:none} } .no-js .curtain{display:none} body.curtained{overflow:hidden} /* ══════════════════════════════════════════════════════════════ THE HERO One screen. The words hold still on the left while the room behind them changes: the rose, the essence, the still, then the bottle with its petals drifting. Nothing is pinned and nothing is four screens tall, so the page scrolls the way a page does. ══════════════════════════════════════════════════════════════ */ .hero{position:relative;min-height:var(--stage,100svh);overflow:hidden; background:var(--noir);isolation:isolate; display:grid;align-items:center; padding:clamp(6rem,13vh,9rem) var(--pad) clamp(4rem,9vh,6rem)} /* The scenes, stacked; only the live one is lit. The plate is portrait, because the photographs are. Full-bleed across a 16:9 screen a 9:16 frame shows barely a third of its own height and the bottle simply will not fit; from 46% it shows nearly sixty per cent and every subject is whole. It bleeds off the right and the foot, and the scrim below feathers its left edge into the ground, so the words sit on darkness and the room appears to run off the screen. */ .hero-scenes{position:absolute;inset:0;z-index:0} @media (max-width:899px){ .hero-scenes{inset:0} /* A phone is already far taller than it is wide: less overhang for the drift here, or the box turns narrower than the picture and starts taking the subject's margin off the sides again. And the drift itself is halved and slowed — the same travel that reads as a camera breathing across a desk reads as the rose sliding down a phone. */ .scene .lay{inset:-5% 0;height:110%} .scene[data-motion="burns"].on .lay.a{animation-duration:16s} } .scene{position:absolute;inset:0;opacity:0;overflow:hidden; transition:opacity 1250ms cubic-bezier(.16,.84,.28,1);will-change:opacity} .scene.on{opacity:1} /* The layer is taller than the scene and hangs over it top and bottom, which is the room the slow drift moves through. Its width is still exactly the scene's, so nothing is ever taken off the sides — the bowl in chapter two runs to both edges of its own photograph and had its rims shaved by a zoom. */ .scene .lay{position:absolute;inset:-10% 0;display:block;width:100%;height:120%; object-fit:cover;object-position:var(--pos,50% 50%); transform:translateZ(0);backface-visibility:hidden} .scene .lay.b{opacity:0} .scene.xf .lay{transition:opacity 520ms cubic-bezier(.22,.61,.36,1)} /* A slow drift down the picture and back, out and back over nine seconds: about seven pixels a second, which reads as a camera breathing. It is a pan and not a push, so the frame never closes in on the subject — a zoom crops every side at once, and these photographs have no margin to give on the sides. */ @keyframes kenburns{from{transform:translate3d(0,-6%,0)} to{transform:translate3d(0,6%,0)}} .scene[data-motion="burns"].on .lay.a{ animation:kenburns 11s cubic-bezier(.5,0,.5,1) infinite alternate} .hero.hold .scene .lay{animation-play-state:paused!important} /* the light in the room, and the dark the words are read on */ .hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(54% 60% at 56% 44%,rgba(201,138,58,.16),transparent 70%)} .hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: linear-gradient(90deg,rgba(10,7,5,.92) 0%,rgba(10,7,5,.88) 26%, rgba(10,7,5,.72) 40%,rgba(10,7,5,.4) 52%,rgba(10,7,5,.12) 64%,rgba(10,7,5,0) 76%), linear-gradient(270deg,rgba(10,7,5,.93) 0%,rgba(10,7,5,.86) 6%, rgba(10,7,5,.54) 13%,rgba(10,7,5,.18) 20%,rgba(10,7,5,0) 28%), linear-gradient(0deg,rgba(10,7,5,.86) 0%,rgba(10,7,5,.5) 20%, rgba(10,7,5,.18) 34%,transparent 50%), linear-gradient(180deg,rgba(10,7,5,.72) 0%,rgba(10,7,5,0) 22%)} /* the words */ .hero-copy{position:relative;z-index:4;max-width:min(38rem,48vw); margin-left:clamp(0rem,4vw,5rem)} .hero-eyebrow{margin:0 0 var(--s5);font-size:var(--t-body); letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lit)} .hero h1{font-family:var(--display);text-transform:uppercase; font-size:clamp(3rem,1.2rem + 5.4vw,6.2rem);line-height:var(--lh-tight); letter-spacing:var(--tr-head);color:#F7F2E9;margin:0 0 var(--s5);text-wrap:balance} .hero h1 em{display:block;font-style:normal} .hero-lede{font-size:clamp(1.3rem,1.08rem + .86vw,2rem);line-height:1.44; font-family:var(--serif);color:var(--ivory);max-width:26ch; margin:0 0 var(--s7);text-wrap:pretty} .hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s7)} .hero-cta{display:inline-flex;align-items:center;gap:var(--s4);min-height:3.4rem; padding:var(--s3) var(--s7);border:1px solid rgba(120,86,30,.5);color:var(--metal-ink); border-radius:var(--r-pill);background:var(--metal);font-weight:500; box-shadow:var(--metal-edge),0 10px 26px rgba(0,0,0,.5); text-shadow:0 1px 0 rgba(255,242,218,.5); font-size:var(--t-micro);letter-spacing:var(--tr-caps);text-transform:uppercase; transition:background .35s var(--e),box-shadow .35s var(--e),transform .12s var(--e)} .hero-cta svg{width:.72rem;height:.72rem;flex:none;transition:transform .35s var(--e)} .hero-alt{font-size:var(--t-small);letter-spacing:.18em;text-transform:uppercase; color:var(--ivory-2);border-bottom:1px solid var(--edge);padding-bottom:var(--s1); min-height:2.75rem;display:inline-flex;align-items:center; transition:color .3s,border-color .3s} @media (hover:hover) and (pointer:fine){ .hero-cta:hover{background:var(--metal-lit); box-shadow:var(--metal-edge),0 12px 30px rgba(0,0,0,.55)} .hero-cta:hover svg{transform:translateX(4px)} .hero-alt:hover{color:var(--gold-lit);border-color:var(--gold)} } .hero-cta:active{transform:scale(.985)} .hero-nums{display:flex;flex-direction:column;align-items:center;gap:.1rem; position:relative;padding-block:.4rem} .hero-nums::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px; background:var(--edge);transform:translateX(-50%)} .hero-nums button{position:relative;padding:var(--s2);min-width:2.75rem;min-height:2.75rem; border-radius:var(--r-pill); display:grid;place-items:center;font-family:var(--fancy);font-size:.95rem; letter-spacing:.06em;color:var(--dim-lit);opacity:.78; transition:color .35s var(--e),opacity .35s var(--e)} .hero-nums button[aria-current="true"]{color:var(--ivory);opacity:1} .hero-nums button::after{content:"";position:absolute;left:50%;top:.35rem;bottom:.35rem; width:1px;background:var(--gold);transform:translateX(-50%) scaleY(0); transform-origin:top;transition:transform .4s var(--e)} .hero-nums button[aria-current="true"]::after{transform:translateX(-50%) scaleY(1)} @media (hover:hover) and (pointer:fine){ .hero-nums button:hover{color:var(--ivory)} } /* An upright screen — a phone, or a tablet held tall — gives the picture the top of the screen on its own and sets the words under it. The same phone turned on its side is a wide screen 390px tall, where that layout puts the standfirst and both buttons below the fold, so the aspect ratio decides this and not the width. It is the same question the player asks when it chooses which plate to load. */ @media (max-width:899px) and (max-aspect-ratio:1/1){ /* the picture takes the top of the screen on its own, the words sit under it on the scrim — nothing is read over the subject */ .hero{align-items:end;padding-top:clamp(4.5rem,42vh,22rem)} .hero::after{background: linear-gradient(0deg,rgba(10,7,5,.97) 0%,rgba(10,7,5,.95) 42%, rgba(10,7,5,.74) 56%,rgba(10,7,5,.24) 76%,rgba(10,7,5,0) 92%), linear-gradient(180deg,rgba(10,7,5,.74) 0%,rgba(10,7,5,0) 20%)} /* Upright, the words are one column under the picture, so they centre the way every other opening on a phone does. Beside the photograph is a wide-screen composition and there is no beside here. */ .hero-copy{max-width:none;margin-left:0;text-align:center} .hero-acts{justify-content:center} .hero h1{font-size:clamp(2.5rem,1.5rem + 4.6vw,4.3rem)} /* on a phone the words are read over the picture, so the eyebrow is lifted off the house gold to one that survives a lit petal */ .hero-eyebrow{color:#F8E8C8} .hero-lede{max-width:32ch;margin-inline:auto} .scene .lay{object-position:var(--pos-m,50% 34%)} } /* A screen wider than it is tall and shorter than a laptop's: a phone or a tablet on its side. The first screen keeps the wide composition — words beside the picture — but everything comes down a size, so the eyebrow, the headline, the standfirst and both calls to action are all above the fold in 390px of height. */ @media (min-aspect-ratio:1/1) and (max-height:600px){ .hero{align-items:center; padding:clamp(4.2rem,15vh,5.6rem) var(--pad) clamp(1.4rem,6vh,2.4rem)} .hero-copy{max-width:min(30rem,52vw)} .hero-eyebrow{margin-bottom:var(--s3);font-size:var(--t-small)} .hero h1{font-size:clamp(1.85rem,.9rem + 3.3vw,3rem)} .hero-lede{font-size:clamp(.98rem,.88rem + .5vw,1.18rem); margin-bottom:var(--s5);max-width:30ch} .hero-acts{gap:var(--s3) var(--s5)} .hero-cta{min-height:2.9rem;padding:var(--s2) var(--s6)} .hero-alt{min-height:2.75rem} } /* ══ A MEMORY, DISTILLED ══════════════════════════════════════ */ .distilled{background:linear-gradient(180deg,var(--noir),var(--soot) 45%,var(--noir)); text-align:center;position:relative;overflow:hidden; padding:clamp(4rem,9vw,7.5rem) var(--pad)} /* one line on a wide screen, and it has to hold that even when the web font has not arrived and a fallback with wider metrics stands in */ .distilled h2{font-family:var(--display);text-transform:uppercase; font-size:var(--t-h3);letter-spacing:.18em; line-height:var(--lh-head);color:var(--ivory);margin:0 auto;text-wrap:balance} .distilled .rule.short{margin:1.4rem auto clamp(2.4rem,5vw,3.6rem)} .steps{display:grid;gap:0;grid-template-columns:1fr;max-width:66rem;margin-inline:auto} @media (min-width:820px){ .steps{grid-template-columns:repeat(3,1fr)} } .step{padding:var(--s7) clamp(var(--s4),2.6vw,var(--s6));position:relative} @media (min-width:820px){ .step + .step::before{content:"";position:absolute;left:0;top:6%;bottom:6%;width:1px; background:linear-gradient(180deg,transparent,var(--edge-2),transparent)} } @media (max-width:819px){ .step + .step{border-top:1px solid var(--edge)} } .step .n{font-family:var(--fancy);font-size:var(--t-small);letter-spacing:.24em; color:var(--dim-lit);display:block;margin-bottom:var(--s4); font-variant-numeric:tabular-nums} .step h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em; font-size:var(--t-h4);color:var(--ivory);margin:0;line-height:var(--lh-head)} .step .tick{display:block;width:var(--s5);height:1px;background:var(--gold); margin:var(--s4) auto;opacity:.75;border-radius:var(--r-pill)} .step p{color:var(--ivory-2);font-size:var(--t-body);margin:0;max-width:30ch; margin-inline:auto;line-height:var(--lh-body);text-wrap:pretty} .distilled .aside{position:absolute;right:var(--pad);bottom:clamp(1rem,3vh,2rem); margin:0;font-size:var(--t-micro);letter-spacing:.34em;text-transform:uppercase; color:var(--dimmer);display:none} @media (min-width:1100px){ .distilled .aside{display:block} } /* A full-bleed breath between sections: one picture across the page with a single line laid over it. The page is otherwise column after column, and an editorial page needs somewhere to stop reading. */ .band{position:relative;margin:0;overflow:hidden;background:var(--char); aspect-ratio:21/9;isolation:isolate} @media (min-width:900px){ .band{border-radius:var(--r-xl); margin-inline:var(--pad)} } .band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.1s var(--e)} .band img.on{opacity:1} .band::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,rgba(10,7,5,.86) 0%,rgba(10,7,5,.24) 34%, rgba(10,7,5,0) 62%),linear-gradient(180deg,rgba(10,7,5,.5),transparent 30%)} .band figcaption{position:absolute;z-index:2;left:var(--pad);right:var(--pad); bottom:clamp(1.6rem,5vw,3.4rem);margin:0; font-family:var(--serif);font-style:italic;font-weight:300; font-size:clamp(1.1rem,.9rem + 1.5vw,2.1rem);line-height:1.34; color:var(--ivory);max-width:26ch;text-wrap:balance} .band .ph{position:absolute;inset:0;display:grid;place-items:center; font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--dimmer)} @media (max-width:760px){ /* Taller than the 21:9 it is on a wide screen, so the rose comes up behind the line. 4:3 threw away two fifths of the picture's width and the rose went with it; 5:4 still cut the right of the bloom, because the flower is wider than a 5:4 window of a 2.3:1 picture. 3:2 is the tallest frame the whole bloom fits in. */ .band[data-pic="botanical"]{aspect-ratio:3/2} .band::after{background:linear-gradient(0deg,rgba(10,7,5,.95) 0%, rgba(10,7,5,.68) 38%,rgba(10,7,5,.22) 64%,rgba(10,7,5,0) 84%)} } /* ── 8. SECTION SHELL ──────────────────────────────────────── */ .sec{padding:var(--sec) var(--pad);position:relative} /* One gap between two sections, not two. Where the ground changes — a tinted band, a photograph across the page — the change is itself the break, so the section after it only needs half a gap to clear it. */ .sec + .sec{padding-top:0} .distilled + .sec,.pullband + .sec,.band + .sec{padding-top:calc(var(--sec) * .55)} /* The first screen already holds a gap of its own: it is a full-height picture with the words set against its bottom edge, and the space under them is the hero's own padding. A full section gap on top of that is the two-paddings-stacked problem in another shape — on a phone it put 143px between the last line of the hero and the top of her film, which reads as the page having forgotten what comes next. What is added here brings the total to about one gap: 92px on a phone, 126 on a desktop. */ .filmhero + .sec,.phero + .sec{padding-top:clamp(0rem,4vw,3.4rem)} /* proximity: the heading belongs to its standfirst, the standfirst to the block below it, and each is a smaller gap than the gap between sections */ .sec .lab + *{margin-top:0} .sec h2 + .body,.sec h2 + p{margin-top:var(--s5)} .sec.tight{padding-block:clamp(3.2rem,7vw,6rem)} /* Paper, not a flat fill: the dark sections have a light source in them and the cream ones looked switched-off beside them. Same room, other hour. */ .wrap{max-width:78rem;margin-inline:auto} .wrap.narrow{max-width:52rem} /* two-column editorial split */ /* One column until there is room for two. The base used to be an auto-fit track, which takes a second column as soon as 40rem fit — so on a tablet a wide-right split was still two half-width columns while everything around it had come down to one, and its text sat in a 354px column on the left of a 759px row. wide-left said 1fr below 900 and wide-right said nothing, which is where that came from. */ .split{display:grid;gap:var(--gap);align-items:center; grid-template-columns:1fr} @media (min-width:900px){ .split{grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr))} .split.wide-left{grid-template-columns:1.05fr .95fr} .split.wide-right{grid-template-columns:.95fr 1.05fr} .split.flip > :first-child{order:2} } /* ── 10. HER WORDS ─────────────────────────────────────────── */ .words-fig{aspect-ratio:4/5;width:100%} blockquote{margin:0} .pull-q{font-family:var(--serif);font-weight:300;font-style:italic; font-size:var(--t-h3);line-height:var(--lh-head);color:var(--ivory); max-width:30ch;margin:0 0 var(--s6);text-wrap:balance} .pull-q::before{content:"\201C";color:var(--gold);margin-right:.06em} .byline{display:inline-flex;align-items:center;gap:.85rem} .byline .face{width:2.6rem;height:2.6rem;border-radius:50%;overflow:hidden;flex:none; background:var(--char);border:1px solid var(--edge);position:relative} .byline .face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .byline .sig{font-family:var(--hand);font-size:1.28rem;color:var(--gold-lit);line-height:1.2} /* ── 11. THE BENCH (threads) ───────────────────────────────── */ .bench-head{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:end;margin-bottom:clamp(2.4rem,5vw,3.6rem)} @media (min-width:900px){ .bench-head{grid-template-columns:1.1fr .9fr} } .threads{display:grid;gap:clamp(.9rem,2vw,1.4rem);grid-template-columns:1fr} @media (min-width:620px){ .threads{grid-template-columns:repeat(2,1fr)} } @media (min-width:1240px){ .threads{grid-template-columns:repeat(5,1fr)} } /* Five cards in two columns leave one over. It used to take the whole row, which was right while the cards were empty and a drawn mark stretched to fit. They are photographs now, and a 3:4 picture in a 16:7 strip loses two thirds of itself. Six tracks instead: three cards then two, every one of them still the shape the photograph was cropped to. */ @media (min-width:620px) and (max-width:1239px){ .threads{grid-template-columns:repeat(6,1fr)} .threads > *{grid-column:span 2} .threads > :nth-child(4),.threads > :nth-child(5){grid-column:span 3} } .thread{position:relative;display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:3/4;width:100%;padding:var(--s5);text-align:left;overflow:hidden; border:1px solid var(--edge);background:var(--char);border-radius:var(--r-lg); transition:border-color .3s var(--e),transform .3s var(--e)} .thread .im{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--char-2)} .thread .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.02);transition:opacity 1s var(--e),transform .34s var(--e)} .thread .im img.on{opacity:.92} .thread::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,rgba(10,7,5,.96) 12%,rgba(10,7,5,.78) 34%, rgba(10,7,5,.34) 64%,rgba(10,7,5,.14) 100%)} /* the words now lie on a photograph, so they carry their own shadow */ .thread > *:not(.im){position:relative;z-index:2; text-shadow:0 1px 12px rgba(10,7,5,.92),0 0 2px rgba(10,7,5,.6)} .thread .n{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.28em;color:var(--gold); margin-bottom:auto} .thread .ttl{display:block;font-family:var(--serif);font-weight:300;line-height:1.15; font-size:clamp(1.2rem,1rem + .5vw,1.5rem);margin-bottom:.5rem;color:var(--ivory)} /* The card reads from the bottom up, so a name or a blurb that runs a line short lifted everything above it and the five names landed on five different lines. Both now keep their full height whether they need it. */ @media (min-width:620px){ .thread .ttl{min-height:2.3em} .thread p{min-height:4.8em} } .thread p{font-size:var(--t-body);color:var(--ivory-2);margin:0 0 .9rem;line-height:1.55} .thread .open{font-size:var(--t-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lit); display:inline-flex;align-items:center;gap:.5rem} .thread .open::after{content:"";width:1.2rem;height:1px;background:currentColor;transition:width .4s var(--e)} /* A thread is a question, not an object, so there is nothing to photograph for it — until Stefanie has a picture she wants there, each card carries a mark drawn in the same single gold line as the opening flacon. The mark is only written when the slot has no photograph in it. */ .thread .emb{position:absolute;top:var(--s5);right:var(--s5); width:min(56%,116px);aspect-ratio:1;pointer-events:none; color:var(--gold);opacity:.26;transition:opacity .3s var(--e)} .thread .emb{top:var(--s4);width:min(50%,102px)} .thread .emb svg{display:block;width:100%;height:100%;overflow:visible} .thread .emb path{fill:none;stroke:currentColor;stroke-width:1.5; stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke} .thread .emb .dotted path{stroke-dasharray:1.6 4.6} /* On a phone each card is the width of the screen, and a 3:4 box with no photograph in it is mostly void. The card lies down, and the mark grows to fill what is left beside the words. */ @media (max-width:619px){ .thread:has(.emb){aspect-ratio:16/9;min-height:11rem} .thread .emb{top:50%;transform:translateY(-58%);width:min(34%,116px)} .thread:has(.emb) .ttl,.thread:has(.emb) p{max-width:62%} } .coda{margin-top:clamp(1.8rem,4vw,2.8rem);padding-top:1.5rem;border-top:1px solid var(--edge); font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--dim);max-width:52ch} /* ── 12. THE STAGE (a memory, taken full screen) ───────────── */ .stage{position:fixed;inset:0;z-index:400;visibility:hidden;pointer-events:none} .stage.on{visibility:visible;pointer-events:auto} .stage .sbg{position:absolute;inset:0;background:var(--noir);opacity:0; transition:opacity .45s var(--e);overflow:hidden} /* The thread's own picture, taken full screen behind the words. Every one of the five is upright and the screen is not, so half the height goes; centred, that took the head off the figure in "Someone in particular". The window sits high, where all five put their subject. */ .stage .sbg img{width:100%;height:100%;object-fit:cover;object-position:50% 22%; opacity:.3;filter:saturate(.7)} .stage .sbg::after{content:"";position:absolute;inset:0; background:linear-gradient(90deg,rgba(10,7,5,.96),rgba(10,7,5,.7))} .stage.on .sbg{opacity:1} .stage-in{position:relative;height:100%;overflow-y:auto;overscroll-behavior:contain; display:grid;gap:clamp(1.8rem,4vw,3.5rem);align-content:center; padding:clamp(4.5rem,9vh,6rem) var(--pad) clamp(2rem,5vh,3rem); opacity:0;transform:translateY(14px);transition:opacity .34s .08s var(--e),transform .38s .08s var(--e)} @media (min-width:900px){ .stage-in{grid-template-columns:1.05fr .95fr;align-items:center} } .stage.on .stage-in{opacity:1;transform:none} .sclose{position:absolute;top:1rem;right:1rem;z-index:5;width:2.9rem;height:2.9rem; border:1px solid var(--edge-2);border-radius:50%;display:grid;place-items:center; background:rgba(10,7,5,.6);transition:border-color .3s} .stage .n{font-family:var(--display);font-size:var(--t-micro);letter-spacing:.3em;color:var(--gold);display:block;margin-bottom:1rem} .stage h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,1.2rem + 2.5vw,3rem);margin-bottom:.9rem} .chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem} .chip{display:inline-flex;align-items:center;gap:var(--s2);min-height:2.75rem; padding:var(--s3) var(--s4);border:1px solid var(--edge-2);border-radius:var(--r-pill); font-size:var(--t-small);color:var(--ivory-2); transition:border-color .3s,background .3s,color .3s,transform .12s var(--e)} .chip:active:not([disabled]){transform:scale(.97)} .chip .dot{width:.6rem;height:.6rem;border-radius:50%;flex:none} .chip[aria-pressed="true"]{border-color:rgba(110,64,26,.55);background:var(--metal); color:var(--metal-ink);font-weight:500; box-shadow:var(--metal-edge),0 6px 16px rgba(0,0,0,.34); text-shadow:0 1px 0 rgba(255,242,218,.5)} .chip[aria-pressed="true"] .dot{box-shadow:0 0 0 1px rgba(26,18,6,.45)} .chip[disabled]{opacity:.35;cursor:not-allowed} .flask{display:grid;gap:1.2rem;justify-items:start; border-left:1px solid var(--edge);padding-left:clamp(1.2rem,3vw,2.4rem)} @media (max-width:899px){ .flask{border-left:0;border-top:1px solid var(--edge); padding-left:0;padding-top:1.8rem} } .glass{width:min(46vw,166px)} @media (max-width:899px){ .glass{width:min(34vw,132px)} } .glass canvas{width:100%;height:auto} .pyr{margin:0;display:grid;gap:.7rem;width:100%} .pyr .tier{display:grid;grid-template-columns:4.6rem 1fr;gap:.9rem;align-items:baseline; padding-bottom:.7rem;border-bottom:1px solid var(--edge)} .pyr dt{font-size:var(--t-micro);letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin:0} .pyr dd{margin:0;font-family:var(--serif);font-size:1.02rem;color:var(--ivory-2);line-height:1.4} .blank{color:var(--dimmer);font-size:var(--t-small);font-style:italic;margin:0} .acts{display:flex;flex-wrap:wrap;gap:.9rem 1.4rem;align-items:center;margin-top:.4rem} /* ── 13. COMPOSED BY HAND + the written formula ────────────── */ /* The card is as tall as what is on it. It used to hold a fixed 22rem whatever was written, so a three-line accord left a third of the paper blank. */ .paper{position:relative;background:linear-gradient(168deg,#EDE4D2,#DCCDB4);color:#3A2E20; padding:clamp(1.8rem,4vw,2.8rem);border-radius:var(--r-lg); box-shadow:0 26px 60px rgba(0,0,0,.5);overflow:hidden} .paper::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background:radial-gradient(80% 60% at 22% 12%,rgba(255,255,255,.5),transparent 60%), radial-gradient(70% 70% at 88% 92%,rgba(120,90,50,.16),transparent 60%)} .paper .lab{color:#6F5A3C;position:relative} .paper .lab::before{background:#A8813F} /* Ruled like the pad it is meant to be: a dotted line for every ingredient the formula could hold, so the lines she has not written yet read as room left for them rather than as a gap. The rule pitch is the line height, so the writing lands on the rules. */ .hand{--rule:1.62em; position:relative;font-family:var(--hand);font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem); line-height:1.62;color:#3F3122;white-space:pre-wrap; min-height:calc(var(--rule) * 7); background-image:radial-gradient(circle at 1px 50%,rgba(58,46,32,.26) .75px,transparent 1.1px); background-size:7px var(--rule); background-position:0 calc(var(--rule) * .095); background-repeat:repeat} .hand .ch{opacity:0} .hand .ch.on{opacity:1} .hand .nib{position:absolute;width:1px;height:1.15em;background:#5A4530;opacity:0; transition:left .05s linear,top .08s linear} .hand .nib.on{opacity:.55;animation:nibblink .7s steps(2) infinite} @keyframes nibblink{0%,100%{opacity:.55}50%{opacity:.12}} .paper .foot{position:relative;display:flex;flex-wrap:wrap;gap:.6rem 1.4rem; justify-content:space-between;margin-top:1.6rem;padding-top:1rem; border-top:1px solid rgba(58,46,32,.2);font-size:var(--t-micro);letter-spacing:.2em; text-transform:uppercase;color:#6B5740} .paper .blot{position:absolute;right:-2rem;bottom:-2rem;width:9rem;height:9rem;border-radius:50%; background:radial-gradient(circle,rgba(110,35,51,.16),transparent 68%)} /* ── 14. LEGACY ────────────────────────────────────────────── */ .wide-fig{aspect-ratio:21/9;width:100%;margin:0} /* a 21:9 picture in a 3:2 box loses a third of its width; 16:9 keeps most of the room in the room */ @media (max-width:760px){ .wide-fig{aspect-ratio:16/9} } /* a hairline the way the shelf cards have one */ .room-fig{border:1px solid var(--edge)} .room-fig figcaption{color:rgba(243,237,226,.72)} /* A phone takes a third off the width of a 21:9 picture. Cropped from the middle that loses the open door and the Acropolis behind it, which is the whole reason to show the room, so it is cropped from the left. */ @media (max-width:760px){ .room-fig img{object-position:30% 50%} } .legacy-body p{color:var(--ivory-2);max-width:52ch} .legacy-body p:first-child::first-letter{font-family:var(--display);float:left; font-size:3.4em;line-height:.82;padding:.06em .12em 0 0;color:var(--gold)} .portrait-fig{aspect-ratio:4/5;width:100%} /* ══ HER WORD — the home page, under the first screen ════════════ Her photograph and what she says about the work, before anything explains itself. The quote is set larger here than it is on the Maison page: on the home page it is the first thing after the headline and it carries the whole idea of the place. */ .herword{background:linear-gradient(180deg,var(--noir),var(--soot) 50%,var(--noir))} .herword .split{align-items:center} .herword .portrait-fig{border-radius:var(--r-xl)} .herword .pull-q{font-size:clamp(1.58rem,1.18rem + 1.6vw,2.6rem); line-height:1.24;color:var(--ivory);max-width:21ch;margin-bottom:var(--s5); text-wrap:pretty} .herword .byline{margin-bottom:var(--s6)} .herword .byline .sig{font-size:1.46rem} .herword .body{max-width:44ch;margin-bottom:var(--s6)} @media (max-width:899px){ /* On a phone she comes first and the words sit under her, centred on the column the way the section below this one is — and the frame keeps the photograph's own proportion, because a 3/4 box took twelve pixels off each side and the flacon is at the very edge. Nothing here crops anything. */ .herword .portrait-fig{margin-bottom:var(--s6)} .herword .split > div{text-align:center} .herword .lab{justify-content:center} .herword .pull-q{max-width:20ch;margin-inline:auto} .herword .body{margin-inline:auto} } /* ── 15. THE SESSION ───────────────────────────────────────── */ .session{display:grid;gap:clamp(1.6rem,3.4vw,2.6rem);margin-top:clamp(2.4rem,5vw,3.4rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))} .session .item{border-top:1px solid var(--edge);padding-top:var(--s5)} .session .item .n{font-size:var(--t-micro);letter-spacing:var(--tr-caps); text-transform:uppercase;color:var(--gold);display:block;margin-bottom:var(--s4)} .session .item h3{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em; font-size:var(--t-h4);line-height:var(--lh-head);margin-bottom:var(--s3)} @media (min-width:600px){ .session .item h3{min-height:calc(2em * var(--lh-head))} } .session .item p{font-size:var(--t-body);color:var(--ivory-2);margin:0; line-height:var(--lh-body);text-wrap:pretty} .session-foot{display:flex;flex-wrap:wrap;gap:1.1rem 2rem;align-items:center; margin-top:clamp(2.2rem,5vw,3rem);padding-top:1.5rem;border-top:1px solid var(--edge)} .session-foot p{margin:0;font-size:var(--t-body);color:var(--ivory-2)} .session-foot .btn{margin-left:auto} @media (max-width:600px){ .session-foot .btn{margin-left:0;width:100%} } /* ── 16. THE SHELF ─────────────────────────────────────────── */ .shelf-head{display:grid;gap:clamp(1.4rem,3.5vw,3rem);align-items:end;margin-bottom:clamp(2rem,4vw,3rem)} @media (min-width:900px){ .shelf-head{grid-template-columns:1.05fr .95fr} } .filters{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem; margin-bottom:clamp(1.8rem,4vw,2.6rem)} /* The seven categories used to run along one line on a phone and be pushed sideways, because wrapping them at full size took four rows and put the shelf below the fold. A category you cannot see is a category nobody presses, so they wrap again — in levels, centred — and the room for them is found by tightening the pills rather than by hiding four of them off the edge of the screen. Three rows, and the shelf still starts on the first screen. */ .filters button{min-height:2.75rem;padding:var(--s3) var(--s5);font-size:var(--t-micro); letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--edge-2); color:var(--ivory-2);background:rgba(243,237,226,.045);border-radius:var(--r-pill); transition:border-color .3s,background .3s,color .3s,transform .12s var(--e)} .filters button:active{transform:scale(.97)} .filters button[aria-pressed="true"]{background:var(--metal);border-color:rgba(110,64,26,.55); color:var(--metal-ink);font-weight:500; box-shadow:var(--metal-edge),0 6px 16px rgba(62,32,10,.34); text-shadow:0 1px 0 rgba(255,242,218,.5)} .filters button[aria-pressed="true"]:hover{background:var(--metal-lit);color:var(--metal-ink)} @media (max-width:699px){ .filters{gap:.4rem;margin-bottom:var(--s6)} /* narrow, not short: the width is what made five ragged levels, and the height is the thing you have to hit with a thumb */ .filters button{min-height:2.75rem;padding:var(--s2) .6rem;letter-spacing:.05em} } .grid{display:grid;gap:clamp(1.5rem,3vw,2.4rem); grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))} .card .shot{display:block;position:relative;aspect-ratio:4/5;overflow:hidden; background:linear-gradient(165deg,#1A130C 0%,#120D08 52%,#0D0906 100%); margin-bottom:var(--s4);border:1px solid var(--edge); border-radius:var(--r-lg)} /* An empty slot is a flat swatch and needs a light put into it. A photograph arrives with its own, and the same wash over it reads as a cold veil across the top of the card — twelve times down the shelf. */ .card .shot::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(62% 52% at 50% 16%,rgba(255,252,245,.7),transparent 64%), linear-gradient(0deg,rgba(96,74,46,.16),transparent 42%)} .card .shot:has(img.on)::after{ background:linear-gradient(0deg,rgba(18,12,7,.34),transparent 38%)} .card .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity .9s var(--e),transform .34s var(--e)} .card .shot img.on{opacity:1} .card .shot .ph{position:absolute;inset:0;display:grid;place-items:center;padding:1rem;text-align:center; font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)} .card .tag{position:absolute;z-index:2;left:var(--s3);top:var(--s3); padding:var(--s1) var(--s3);background:rgba(10,7,5,.78);border-radius:var(--r-pill); border:1px solid var(--edge); color:var(--ivory-2);font-size:var(--t-micro);letter-spacing:.18em;text-transform:uppercase} /* The cards sit in rows, so a name or a line of copy one line short left the price floating mid-air against its neighbour's. The card is a column and the price is pushed to the floor of it. */ .card{display:flex;flex-direction:column} .card .price{margin-top:auto} .card h3{font-family:var(--serif);font-weight:400;font-size:1.36rem; margin-bottom:.3rem;line-height:1.18;letter-spacing:.004em} .card h3 button{text-align:left;padding-block:.15rem;transition:color .3s} .card .sub{display:block;font-size:var(--t-body);color:var(--ivory-2); margin-bottom:var(--s2);line-height:var(--lh-body);text-wrap:pretty} /* tracking pulled in from .18em: at .18 the longest of these lines needed 341px in a 283px column and wrapped, which threw that card's last line out of step with the three beside it */ .card .price{display:block;font-size:var(--t-small);letter-spacing:.11em; text-transform:uppercase;color:var(--gold-lit);font-variant-numeric:tabular-nums} .card .price s{opacity:.75;text-decoration:none} /* Twelve cards one under the other, each with a picture the width of the screen, was most of the page. Two to a row fixed the length and broke the type: a 169px column cannot hold copy set at reading size without putting the name on three lines. So on a phone the shelf is a list — picture at the left, the name and the price beside it at full size. */ @media (max-width:699px){ .grid{grid-template-columns:1fr;gap:var(--s5)} .card{display:grid;grid-template-columns:7.4rem 1fr; column-gap:var(--s4);align-items:center;align-content:center} /* the picture is absolutely positioned inside the frame, so the frame has no content to size itself from and needs both of its own */ .card .shot{grid-column:1;grid-row:1 / span 3;align-self:center; margin-bottom:0;width:7.4rem;height:9.25rem;aspect-ratio:auto} /* a row reads from its left edge; the centred setting is for the sections above, where the text is the whole column */ .card h3,.card .sub,.card .price{grid-column:2;text-align:left} .card h3{font-size:1.24rem;margin-bottom:.25rem} .card .price{margin-top:.4rem} /* at this width the category badge is wider than the picture it sits on, and the same word is already a filter at the top of the page */ .card .tag{display:none} } /* ── 17. GUEST BOOK ────────────────────────────────────────── */ .gb{display:grid;gap:clamp(2rem,5vw,4rem)} @media (min-width:900px){ .gb{grid-template-columns:.85fr 1.15fr} } .score{display:flex;align-items:center;gap:1rem;margin-bottom:1.2rem} .score b{font-family:var(--display);font-size:clamp(2.6rem,2rem + 2vw,3.8rem);line-height:1;color:var(--ivory)} .qs{display:grid;gap:clamp(1.4rem,3vw,2rem); grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr))} /* beside the score the quotes read down the page like a guest book, rather than filling two columns and leaving a hole under the last one */ @media (min-width:900px){ .qs{grid-template-columns:1fr;align-content:start} .qs blockquote{max-width:46ch} } .qs figure{margin:0;border-top:1px solid var(--edge);padding-top:1.2rem} .qs blockquote{font-family:var(--serif);font-size:var(--t-lede);line-height:1.5; color:var(--ivory-2);margin:var(--s3) 0 var(--s4);text-wrap:pretty} .qs cite{font-style:normal;font-size:var(--t-small);letter-spacing:.2em;text-transform:uppercase;color:var(--dimmer)} /* A long review is clipped to the height of a short one and fades out at the cut, with the whole of it a click away. The text itself is never shortened: it is all there in the page, for search engines and for anyone reading with the styles off. */ .qs figure.long blockquote{display:-webkit-box;-webkit-box-orient:vertical; -webkit-line-clamp:7;overflow:hidden;position:relative;margin-bottom:var(--s2)} .qs .rv-more{display:inline-block;margin:0 0 var(--s4); font-family:var(--sans);font-size:var(--t-small);letter-spacing:.14em; text-transform:uppercase;color:var(--gold);text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--gold) 45%,transparent); padding-bottom:.15rem} @media (hover:hover) and (pointer:fine){ .qs .rv-more:hover{border-bottom-color:var(--gold)} } .pullband{padding:clamp(3rem,7vw,5.5rem) var(--pad);text-align:center; background:linear-gradient(180deg,var(--noir),var(--char) 50%,var(--noir))} .pullband p{font-family:var(--serif);font-style:italic;font-weight:300; font-size:var(--t-h2);line-height:var(--lh-head);color:var(--ivory); max-width:24ch;margin:0 auto;text-wrap:balance;letter-spacing:var(--tr-head)} /* ── 18. VISIT ─────────────────────────────────────────────── */ .addr{font-family:var(--serif);font-size:var(--t-lede);line-height:1.45; margin:var(--s5) 0;color:var(--ivory);font-variant-numeric:tabular-nums} .hours{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s6); margin:var(--s7) 0 0;padding-top:var(--s5);border-top:1px solid var(--edge); font-size:var(--t-small);font-variant-numeric:tabular-nums} .hours dt{font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase;color:var(--dim); align-self:center} .hours dd{margin:0;color:var(--ivory-2)} .hours a{display:inline-block;padding-block:.3rem; border-bottom:1px solid var(--edge-2);transition:color .3s,border-color .3s} .hours a:hover{color:#8A5F1E;border-color:#8A5F1E} /* Two pictures of the same stepped street, cropped the same and hung at the same height, read as one picture cut in half. They are staggered, and the second is taller, so the pair reaches down beside the hours instead of floating in the top corner. */ .visit-figs{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr;align-items:start} @media (max-width:719px){ .visit-figs{grid-template-columns:1fr} } .visit-figs .fig{aspect-ratio:4/5;width:100%;margin:0} @media (min-width:720px){ .visit-figs .fig:nth-child(1){aspect-ratio:3/4} .visit-figs .fig:nth-child(2){aspect-ratio:4/5;margin-top:clamp(2.4rem,7vw,5rem)} } /* the note lies on a photograph, so it carries its own scrim rather than trusting whatever happens to be underneath it */ .overlay-note{position:absolute;inset:auto 0 0;z-index:2; padding:var(--s8) var(--s5) var(--s5); background:linear-gradient(0deg,rgba(8,5,4,.88) 16%,rgba(8,5,4,.52) 56%,transparent)} .overlay-note p{margin:0;font-family:var(--serif);font-style:italic;font-size:var(--t-body);color:var(--ivory); text-shadow:0 1px 12px rgba(6,4,3,.9)} .mapwrap{position:relative;min-height:20rem;display:grid;place-items:center; padding:clamp(2rem,5vw,3.5rem) var(--pad);text-align:center; background:var(--soot);color:var(--ivory)} .mapwrap .btn-line{border-color:var(--edge-2);color:var(--ivory)} /* Standing where the map will stand, at the map's own height, so the page does not jump when it opens and so the panel reads as something that opens rather than a sentence with a button under it. The whole box is the target; the button inside it is for the keyboard. */ #mapAsk{width:100%;max-width:62rem;min-height:clamp(20rem,45vh,28rem); display:grid;place-content:center;justify-items:center;gap:var(--s4); padding:clamp(2rem,5vw,3rem) var(--pad);cursor:pointer; border:1px dashed var(--edge-2);border-radius:var(--r-lg); background:radial-gradient(68% 60% at 50% 42%,rgba(185,147,88,.055),transparent 72%); transition:border-color .35s var(--e),background-color .35s var(--e)} #mapAsk p{max-width:38ch;margin:0} #mapAsk .map-pin{color:var(--gold);opacity:.75; transition:opacity .35s var(--e),transform .35s var(--e)} #mapAsk:focus-visible{outline:2px solid var(--gold);outline-offset:4px} @media (hover:hover) and (pointer:fine){ #mapAsk:hover{border-color:rgba(185,147,88,.5); background:radial-gradient(68% 60% at 50% 42%,rgba(185,147,88,.1),transparent 72%)} #mapAsk:hover .map-pin{opacity:1;transform:translateY(-2px)} } .mapwrap iframe{width:100%;height:clamp(20rem,45vh,28rem);border:0;display:block; border-radius:var(--r-lg)} .mapwrap.loaded{padding:0;min-height:0} /* ── 19. FAQ ───────────────────────────────────────────────── */ .faq details{border-top:1px solid var(--edge)} .faq details:last-of-type{border-bottom:1px solid var(--edge)} .faq summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s9) var(--s5) 0; position:relative;font-family:var(--serif);font-size:var(--t-h4);color:var(--ivory); transition:color .3s} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"";position:absolute;right:.3rem;top:1.65rem;width:.72rem;height:.72rem; border-right:1px solid var(--gold);border-bottom:1px solid var(--gold); transform:rotate(45deg);transition:transform .35s var(--e)} .faq details[open] summary::after{transform:rotate(-135deg)} .faq details p{margin:0 0 var(--s5);color:var(--ivory-2);max-width:62ch; font-size:var(--t-body);line-height:var(--lh-body);text-wrap:pretty} /* ── 20. FOOTER + DOCK ─────────────────────────────────────── */ .site-foot{padding:clamp(3rem,7vw,5rem) var(--pad) clamp(6rem,10vw,4rem); border-top:1px solid var(--edge);background:var(--soot)} .foot-in{max-width:78rem;margin-inline:auto;display:grid;gap:2rem} /* The mark over the links over the line, each centred on the page — the house sets a footer as one centred column. The six links were pushed to the right of the mark, which put neither on the middle of anything. */ @media (min-width:820px){ .foot-in{gap:1.8rem} } .foot-in nav{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;justify-content:center} .foot-in nav a{font-size:var(--lab);letter-spacing:.2em;text-transform:uppercase;color:var(--dim); transition:color .3s;padding-block:.5rem} .foot-in nav a:hover{color:var(--gold-lit)} .colophon{margin:0;font-size:var(--t-small);letter-spacing:.12em;color:var(--dimmer);text-align:center} /* The bar that used to sit across the foot of a phone — "Find your scent" and "Message Stefanie" — is gone. It only ever appeared under 1240px, which is to say only where it was in the way, and both of its actions are already on the page: Book in the header, and the whole Visit page for the message. Two floating buttons over the photographs was one thing too many. Nothing else referenced .dock except the scroll handler, which now only sticks the header. */ /* ── 21. PRODUCT DRAWER ────────────────────────────────────── */ .scrim{position:fixed;inset:0;z-index:300;background:rgba(6,4,3,.72);opacity:0;visibility:hidden; transition:opacity .4s var(--e),visibility .4s;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} body.drawer .scrim{opacity:1;visibility:visible} /* The panel is addressed by its id, not by its class. The open state is `drawer` on , and `.drawer` matched the body too: opening a product turned the whole page into a 32rem panel and slid it off the right-hand edge. Nothing on the shelf could be opened. */ #drawer{position:fixed;top:0;right:0;bottom:0;z-index:320;width:min(100%,32rem); border-radius:var(--r-xl) 0 0 var(--r-xl); background:var(--soot);border-left:1px solid var(--edge);overflow-y:auto;overscroll-behavior:contain; transform:translateX(101%);visibility:hidden;transition:transform .34s var(--e),visibility .34s} body.drawer #drawer{transform:none;visibility:visible} .dclose{position:absolute;top:1rem;right:1rem;z-index:3;width:2.75rem;height:2.75rem;border-radius:50%; border:1px solid var(--edge-2);display:grid;place-items:center;background:rgba(10,7,5,.7)} #drawer .shot{position:relative;aspect-ratio:1/1;background:var(--char);overflow:hidden; border-radius:var(--r-xl) 0 0 0} #drawer .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .dbody{padding:clamp(1.5rem,4vw,2.4rem)} /* the panel runs to the foot of the same viewport, so its last line sat behind the browser's bar in the same way */ @supports (height:100dvh){ .dbody{padding-bottom:calc(clamp(1.5rem,4vw,2.4rem) + max(env(safe-area-inset-bottom,0px),calc(100lvh - 100dvh)))} } .dbody h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);margin-bottom:.4rem} .dbody .sub{color:var(--dim);font-size:var(--t-small);margin-bottom:1.4rem;display:block} .dbody p{color:var(--ivory-2);font-size:var(--t-body)} .spec{display:flex;flex-wrap:wrap;gap:.9rem 2rem;margin:1.5rem 0;padding:1.1rem 0; border-block:1px solid var(--edge);font-size:var(--t-small);color:var(--ivory-2)} .spec b{display:block;font-size:var(--t-micro);letter-spacing:.2em;text-transform:uppercase; color:var(--dimmer);font-weight:400;margin-bottom:.25rem} body.noscroll{overflow:hidden} /* ── 22. REDUCED MOTION — the static equivalent ────────────── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important} .js .rv{opacity:1;transform:none} .js .hero.ready h1 .ln > i,.hero h1 .ln > i{transform:none} .grain{animation:none} .obj-bottle::after{display:none} .hero-glow{animation:none;opacity:.9} .hero-haze{animation:none} .hero-media .plate img,.hero-media .plate video{animation:none;transform:scale(1.03)} .obj-rose img,.obj-vessel img,.obj-bottle img, .hero-plate .m-rose,.hero-plate .m-bottle{animation:none;transform:none} .cue i{animation:none;opacity:.5} .fig img,.thread .im img,.card .shot img{opacity:1} .thread .im img{opacity:.92} } /* the same courtesy for anyone who never gets the script */ .no-js .rv{opacity:1;transform:none} /* ── 22. THE FIRST SCREEN OF AN INNER PAGE ────────────────────── One scene, composed three times: wide, with the subject on the right and the left half dark for the words; 4:3 for a tablet, the same way; and upright for a phone, with the subject in the top half and the words in the quiet underneath it. The artwork is given per page from the Studio, one file per shape. */ .phero{position:relative;isolation:isolate;overflow:hidden; min-height:clamp(30rem,84vh,52rem);display:grid;align-items:center; padding:clamp(7rem,15vh,10rem) var(--pad) clamp(3rem,8vh,5rem)} .phero-pic{position:absolute;inset:0;z-index:0;margin:0;overflow:hidden;background:var(--char)} .phero-pic picture{display:contents} .phero-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:72% 50%;opacity:0;transition:opacity 1.2s var(--e)} .phero-pic img.on{opacity:1} /* the words lie on the dark side of the picture, and the picture is lit from the other one — but a scrim still carries them */ .phero-pic::after{content:"";position:absolute;inset:0; background: linear-gradient(90deg,rgba(10,7,5,.92) 0%,rgba(10,7,5,.74) 34%, rgba(10,7,5,.26) 62%,rgba(10,7,5,.08) 100%), linear-gradient(0deg,rgba(10,7,5,.72) 0%,transparent 34%), linear-gradient(180deg,rgba(10,7,5,.78) 0%,transparent 26%)} .phero-in{position:relative;z-index:2;width:100%;max-width:78rem;margin-inline:auto} /* the words keep to the dark half: the headline breaks where the picture begins rather than running across it */ .phero h1{max-width:14ch} .phero-eyebrow{margin:0 0 var(--s5);font-size:var(--t-small); letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lit)} .phero h1{font-family:var(--display);text-transform:uppercase; font-size:var(--t-h1);line-height:var(--lh-tight);letter-spacing:var(--tr-head); color:#F7F2E9;margin:0;text-wrap:balance} .phero-lede{margin:var(--s5) 0 0;font-family:var(--serif); font-size:clamp(1.14rem,1.02rem + .5vw,1.46rem);line-height:1.5; color:var(--ivory);max-width:31ch;text-wrap:pretty} @media (max-width:1100px){ .phero-pic img{object-position:68% 50%} } /* a phone gets the upright composition: subject up, words under it */ @media (max-width:600px){ .phero{min-height:clamp(32rem,88vh,46rem);align-items:end; padding-bottom:clamp(2.6rem,7vh,4rem)} .phero-pic img{object-position:50% 28%} .phero-pic::after{background: linear-gradient(0deg,rgba(10,7,5,.95) 6%,rgba(10,7,5,.82) 30%, rgba(10,7,5,.22) 62%,rgba(10,7,5,.1) 100%), linear-gradient(180deg,rgba(10,7,5,.74) 0%,transparent 22%)} .phero h1{max-width:none} } /* ── 23. THE FIVE DOORS ON THE HOME PAGE ─────────────────────── With the sections on pages of their own, the home page is the film and then the way in to each of them. */ .doors{display:grid;gap:clamp(.9rem,2vw,1.4rem);grid-template-columns:1fr} @media (min-width:640px){ .doors{grid-template-columns:repeat(2,1fr)} } @media (min-width:1100px){ .doors{grid-template-columns:repeat(3,1fr)} } .door{position:relative;display:flex;flex-direction:column;justify-content:flex-end; aspect-ratio:4/3;overflow:hidden;padding:var(--s6); border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--char); transition:border-color .45s var(--e)} @media (min-width:1100px){ .door:first-child{grid-column:span 2;aspect-ratio:8/3} } .door .im{position:absolute;inset:0;z-index:0;overflow:hidden} .door .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transform:scale(1.02); transition:opacity 1s var(--e),transform .34s var(--e)} .door .im img.on{opacity:.95} .door::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(0deg,rgba(10,7,5,.95) 10%,rgba(10,7,5,.62) 42%, rgba(10,7,5,.18) 100%)} .door > *:not(.im){position:relative;z-index:2; text-shadow:0 1px 12px rgba(10,7,5,.92)} .door .ttl{display:block;font-family:var(--display);text-transform:uppercase; font-size:var(--t-h3);line-height:var(--lh-head);letter-spacing:.04em; color:var(--ivory);margin-bottom:var(--s3)} .door p{margin:0 0 var(--s5);font-size:var(--t-body);color:var(--ivory-2); line-height:var(--lh-body);max-width:34ch;text-wrap:pretty} .door .open{font-size:var(--t-micro);letter-spacing:var(--tr-caps); text-transform:uppercase;color:var(--gold-lit); display:inline-flex;align-items:center;gap:var(--s3)} .door .open::after{content:"";width:1.4rem;height:1px;background:currentColor; transition:width .4s var(--e)} /* A phone has no pointer: a hover painted on tap stays painted until something else is tapped. These only exist where a pointer does. */ @media (hover:hover) and (pointer:fine){ .mark:hover .flacon{color:var(--gold)} .burger:hover{border-color:var(--gold)} .dclose:hover{border-color:var(--gold)} .sclose:hover{border-color:var(--gold)} .linky:hover{color:var(--gold-lit);border-color:var(--gold)} .faq summary:hover{color:var(--gold-lit)} .card h3 button:hover{color:#8A5F1E} .filters button:hover{border-color:#8A5F1E;color:#8A5F1E} .btn-solid:hover{background:var(--metal-lit)} .btn-line:hover{border-color:var(--gold);color:var(--gold-lit);background:rgba(185,147,88,.07)} .mapwrap .btn-line:hover{border-color:var(--gold);color:var(--gold-lit);background:rgba(185,147,88,.07)} .chip:hover:not([disabled]){border-color:var(--gold);color:var(--ivory)} .thread:hover,.thread:focus-visible{border-color:rgba(185,147,88,.5)} .thread:hover .im img{transform:scale(1.06)} .thread:hover .open::after{width:2.2rem} .thread:hover .emb,.thread:focus-visible .emb{opacity:.46} .card:hover .shot img{transform:scale(1.035)} .door:hover{border-color:rgba(185,147,88,.5)} .door:hover .im img{transform:scale(1.06)} .door:hover .open::after{width:2.6rem} } /* On a phone the same travel that reads as a camera breathing across a desk reads as the rose sliding down the screen. Half the distance over half again the time. This has to come after the base definition: two @keyframes of one name, and the later one wins. */ @media (max-width:899px){ @keyframes kenburns{from{transform:translate3d(0,-2.4%,0)} to{transform:translate3d(0,2.4%,0)}} } /* ── TAP TARGETS ──────────────────────────────────────────────── Forty-four pixels square is the floor on anything a finger has to find. These are all a line of type whose box was only as tall as the line itself: the padding is added only where there is no pointer, so nothing moves on a desktop. */ @media (pointer:coarse){ .card h3 button,.foot-in nav a,.linky,.hours dd a,.more{ display:inline-flex;align-items:center;min-height:44px} /* a short name — Χίος — still needs a finger's width */ .card h3 button{text-align:left;min-width:44px} /* a short word still needs a finger's width */ .foot-in nav a{min-width:44px;justify-content:center} .lang button{min-width:2.75rem;min-height:2.75rem} .bar .mark,.site-foot .mark{padding-block:.14rem} .door .open,.thread .open{padding-block:.3rem} } /* The shelf and the story opened on the same eyebrow and the same headline the page had just given them at the top of itself. The heading stays in the document, so the section keeps its name for anyone reading it with their ears; it is simply not drawn twice. */ .dup-head{position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0} /* ══ CENTRED, THE WAY THE HOUSE SETS A PAGE ══════════════════════ The standard is a centred single column: centred sections, centred intros, a centred footer. This page had grown up ragged-left — every heading, standfirst and coda hanging off the left edge, and two of the section openings split into a heading on one side and its own standfirst on the other, which is neither centred nor a column. The first screen keeps its own composition. There the words sit in the dark beside the photograph, which is what the picture is lit and cropped for, and it has been approved that way through every pass. ══════════════════════════════════════════════════════════════ */ /* an intro: the small label, the heading, the line under it */ .sec > .wrap > .lab, .sec > .wrap > h2, .sec > .wrap > .h-display, .sec > .wrap > .h-soft, .sec > .wrap > .body, .sec > .wrap > p{text-align:center} .sec > .wrap > .lab{justify-content:center} .sec > .wrap > .body, .sec > .wrap > p{margin-inline:auto} /* A heading with a measure on it — the session's is 17ch — is a narrow box inside a wide one. Centring its text only centres the words inside that box; the box itself has to be centred too, or the heading sits against the left edge with its words neatly centred over nothing. */ .sec > .wrap > h2, .sec > .wrap > .h-display, .sec > .wrap > .h-soft, .sec > .wrap > h3{margin-inline:auto} /* the two section openings that were a heading beside its own standfirst: one centred column instead */ .bench-head,.shelf-head{grid-template-columns:1fr;justify-items:center; text-align:center;align-items:start} .bench-head .lab,.shelf-head .lab{justify-content:center} .bench-head > *,.shelf-head > *{max-width:52rem} @media (min-width:900px){ .bench-head,.shelf-head{grid-template-columns:1fr} } /* the line that closes the bench */ .coda{margin-inline:auto;text-align:center} /* the footer, truly centred — a 1fr auto 1fr grid so the mark sits on the middle of the page and not on the middle of what is left over */ .foot-in{justify-items:center;text-align:center} .foot-in nav{justify-content:center} .site-foot .mark{justify-content:center} .colophon{margin-inline:auto} /* on a phone every section is one column, so all of it centres */ @media (max-width:899px){ .sec .wrap > *, .sec .split > div, .split > div > *{text-align:center} .sec .lab,.split .lab{justify-content:center} .sec .body,.sec p,.pull-q,.split .body{margin-inline:auto} .sec .more,.split .more,.session-foot{justify-content:center} /* the two actions on the Visit page are a flex row, so they ignored the centring the column around them takes */ .visit-acts{justify-content:center} .session .item{text-align:center} .session .item .n{display:block} } /* A page's own opening. On a wide screen the words sit in the dark half beside the photograph, which is how each one was composed and lit. On a phone the picture takes the top and the words fall beneath it, in one column like everything under them — so they centre too. */ @media (max-width:899px){ .phero-in{text-align:center} /* the headline keeps its 14ch measure here, so it needs centring as a box as well as as text */ .phero h1{margin-inline:auto} .phero-lede{margin-inline:auto} } /* Three rows that are laid out rather than written, so centring the text in them moves nothing: the score beside its stars, and the two lines under the rules on the formula card, which were pushed to the two ends of their row and landed on the left once the card was too narrow to hold them side by side. */ @media (max-width:899px){ .score{justify-content:center} .paper .foot{justify-content:center;gap:.5rem 1.6rem} /* and the label over them: a rule and a line of words side by side, which on a card this narrow put the rule on the left of a heading that had wrapped onto two lines. The rule goes above the words, the way the page sets a centred heading everywhere else. */ .paper .lab{flex-direction:column;align-items:center;gap:var(--s3)} } /* Her words on the Maison page were a photograph on the left and a short column of text on the right, which left a third of the section empty under the text and put neither on the middle of anything. One centred column: the picture, then what she says, then the line under it. Same on every width, because the quote is the point of the section and a quote belongs in the middle. */ #maison .split{grid-template-columns:1fr;justify-items:center; gap:clamp(2rem,5vw,3.2rem);max-width:58rem;margin-inline:auto} #maison .words-fig{aspect-ratio:3/2;width:100%;max-width:46rem} #maison blockquote,#maison .body{text-align:center;margin-inline:auto} #maison .lab{justify-content:center} /* her full sentence, and Greek runs a third longer than English, so the column takes a few more characters than a short pull would */ #maison .pull-q{max-width:min(32ch,34rem);margin-inline:auto} #maison .byline{justify-content:center} #maison .more{justify-content:center} #maison .split > div{display:grid;justify-items:center;gap:var(--s5)} /* A heading should never break onto a line that ends with a short word. Wrap the short word and the one after it: to the */ .nb{white-space:nowrap} /* the count under the stars, which was the last thing on the site still set inline and still under the floor */ .score-count{font-size:var(--t-micro);letter-spacing:.18em; text-transform:uppercase;color:var(--dimmer)} .chip-note{font-size:var(--t-small);color:var(--dimmer);margin-top:1.1rem} /* a link set in a paragraph of body copy matches the copy, not the labels */ p > .linky{font-size:inherit} /* ══ HER OWN WORDS ═══════════════════════════════════════════════ Text taken from lamaisondestefanie.com, set in the places the house pages left for it. Nothing here replaces a line that was already on the page; each rule is a slot that was empty. */ .distilled-lede{max-width:56ch;margin:0 auto clamp(2.4rem,5vw,3.4rem); text-align:center;color:var(--ivory-2)} .distilled-coda{max-width:44ch;margin:clamp(2.2rem,5vw,3.2rem) auto 0; text-align:center;font-family:var(--serif);font-style:italic; font-size:var(--t-lede);line-height:1.5;color:var(--ivory)} .session-pull{margin:var(--s5) 0 0;font-family:var(--display); text-transform:uppercase;font-size:var(--t-h4);letter-spacing:.16em; color:var(--gold-lit)} .gb-band{margin:var(--s5) auto 0;max-width:40ch;text-align:center; font-family:var(--serif);font-style:italic;font-size:var(--t-lede); line-height:1.5;color:var(--ivory-2)} #guestlines .body{text-align:center;margin-inline:auto;max-width:44ch} .phero-ledeB{margin-top:var(--s4);color:var(--ivory-2)} /* ══ WHERE EACH PICTURE IS LOOKED AT ═════════════════════════════ A frame narrower or wider than the photograph in it throws part of the photograph away. Which part is a decision, not a default: every crop below keeps the subject whole and in the middle of what is left. Measured at 390, 834 and 1440. */ /* The bowl sits in the top two thirds of an upright picture and the frame beside her words is a landscape one. Centred, the frame took the rim off the top and filled a third of itself with marble. */ #maison .words-fig img{object-position:50% 20%} /* The rose fills the right half of a 2.3:1 band. On a phone the band is barely wider than it is tall, and centred it cut the bloom in half. */ .band[data-pic="botanical"] img{object-position:92% 50%} /* Every page's opening photograph is composed the same way: the left third dark for the words, the subject in the right two thirds. A door card is a narrower frame than the page it opens, so centring it cut the subject's right edge off — a hand in the bespoke one. Each door looks where its own picture put the subject. */ #doorGrid .door:nth-child(1) .im img{object-position:78% 45%} #doorGrid .door:nth-child(2) .im img{object-position:88% 40%} #doorGrid .door:nth-child(3) .im img{object-position:70% 50%} #doorGrid .door:nth-child(4) .im img{object-position:80% 55%} #doorGrid .door:nth-child(5) .im img{object-position:76% 45%} /* Her face is a third of the way across her portrait and a quarter of the way down it. In a 40px circle, centred, the circle held her shoulder and the bottle and cut her head at the edge. */ .byline .face img{object-position:31% 24%} /* ── HER FILMS ───────────────────────────────────────────────── Stefanie at the counter (home, beside her words) and the bottle in its light (home, a full-bleed breath). Cover-cropped like every other picture; the counter film is held a little high so her face and hands stay in the frame at 4:5. */ .vid-fig video,.filmband video{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} .vid-fig video{object-position:50% 30%} .filmband{aspect-ratio:2/1} .filmband video{object-position:50% 20%} .filmband::after{background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(10,7,5,.55) 100%)} @media (max-aspect-ratio:1/1){ .filmband{aspect-ratio:4/5} .filmband video{object-position:50% 50%} } /* the house that built the site, a line under the copyright */ .byline-zenith{margin-top:.5rem;color:var(--dimmer)} /* ══ THE MAP, AND WHAT SITS UNDER IT ══════════════════════════════ The same three things her own site puts under the map: the name of the house, the street it is on, and the way to open it in Google Maps for directions. A map with no name on it is a pin in a city. */ .map-info{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s4) var(--s6);padding:var(--s5) var(--pad); background:var(--soot);border-top:1px solid var(--edge)} .mi-name{margin:0;font-family:var(--display);font-size:var(--t-h4); letter-spacing:.02em;color:var(--ivory)} .mi-addr{margin:.2rem 0 0;font-size:var(--t-small);letter-spacing:.14em; text-transform:uppercase;color:var(--dim)} .map-info .mi-btn{flex:none} @media (max-width:600px){ .map-info{flex-direction:column;align-items:center;text-align:center} .map-info .mi-btn{width:100%} } /* her rating, as a mark you can follow to the reviews */ .cred{display:inline-flex;align-items:center;gap:var(--s3);margin-top:var(--s5); min-height:2.75rem;padding:var(--s2) var(--s4); border:1px solid var(--edge-2);border-radius:var(--r-pill); transition:border-color .3s var(--e),background .3s var(--e)} .cred-stars{color:var(--gold-lit);letter-spacing:.12em;font-size:var(--t-small)} .cred-txt{font-size:var(--t-small);letter-spacing:.1em;text-transform:uppercase;color:var(--ivory-2)} .cred-txt b{font-family:var(--display);font-weight:400;font-size:var(--t-h4); letter-spacing:0;color:var(--ivory);margin-right:.25rem} @media (hover:hover) and (pointer:fine){ .cred:hover{border-color:var(--gold);background:rgba(185,147,88,.07)} } /* ══ GOOD TO KNOW, READ FROM ITS LEFT EDGE ═══════════════════════ A disclosure list is not a centred block of prose: every question has a chevron pinned to the right of its row, and centring the words leaves each one starting at a different place down a column of seven, with the long ones breaking into two ragged lines. The section's own opening above stays centred; the list reads from one left edge, and so do the answers under it. */ .faq summary, .faq details p{text-align:left;margin-inline:0} /* a question that runs to two lines splits them evenly rather than leaving one short word under a full line */ .faq summary{text-wrap:balance} /* ══ WHAT THE SITE KEEPS ═════════════════════════════════════════ Said once, at the foot of the screen, and gone when it is read. It is a note rather than a gate: the language choice is the only thing kept, and the map sets nothing until somebody asks for it — so there is nothing here to refuse and no second button. */ .cookies{position:fixed;left:0;right:0;z-index:260; bottom:max(env(safe-area-inset-bottom,0px),calc(100lvh - 100dvh)); display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between; gap:var(--s4) var(--s6);padding:var(--s4) var(--pad); background:rgba(10,7,5,.96);border-top:1px solid var(--edge); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); transform:translateY(110%);transition:transform .5s var(--e)} .cookies.up{transform:none} .cookies p{margin:0;max-width:62ch;font-size:var(--t-small);color:var(--ivory-2)} .cookies-acts{display:flex;align-items:center;gap:var(--s5);flex:none} .cookies .btn{min-height:2.75rem;padding:var(--s2) var(--s6)} @media (max-width:700px){ .cookies{flex-direction:column;align-items:center;text-align:center; padding-block:var(--s5)} .cookies-acts{width:100%;justify-content:center} }