/* ========================================================= AMANDA ROSE — Fine Art Wedding Photography Shared design system ========================================================= */ /* The design tokens now live in theme.json, which publishes them as --wp--preset--* custom properties. These short aliases keep the 900 lines of selectors below readable and mean a colour is changed in exactly one place. */ :root{ /* colour */ --bg:var(--wp--preset--color--bg); --surface:var(--wp--preset--color--surface); --surface-2:var(--wp--preset--color--surface-2); --plate:var(--wp--preset--color--plate); /* page-hero title card — white, so it lifts off the beige page */ --band:var(--wp--preset--color--band); /* closing CTA band — a step deeper than --surface so it never merges with it */ --fg:var(--wp--preset--color--fg); --muted:var(--wp--preset--color--muted); --accent:var(--wp--preset--color--accent); --dark:var(--wp--preset--color--dark); --deep:var(--wp--preset--color--deep); --on-dark:var(--wp--preset--color--on-dark); --line:var(--wp--preset--color--line); --line-soft:var(--wp--preset--color--line-soft); /* type */ --font-display:var(--wp--preset--font-family--display); --font-serif:var(--wp--preset--font-family--serif); --font-sans:var(--wp--preset--font-family--sans); /* metrics */ --radius:0px; --section-y:var(--wp--preset--spacing--80); --section-y-sm:var(--wp--preset--spacing--70); --rail:1240px; --rail-wide:1560px; --rail-narrow:760px; --gutter:clamp(1.25rem, 5vw, 3rem); --nav-h:74px; --ease:cubic-bezier(.2,.7,.2,1); } :root *{box-sizing:border-box;} /* [hidden] is only `display:none` in the UA stylesheet, so any class of ours that sets an explicit display (flex, grid) silently outranks it and the element stays on screen doing nothing. The script toggles .hidden on the grid, the topic bar, the pagination and the load-more button — all of which have one. */ :root [hidden]{display:none !important;} html{scroll-behavior:smooth;} :root body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--font-serif); font-size:16px; line-height:1.78; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } :root body.no-scroll{overflow:hidden;} :root img{display:block; max-width:100%;} :root a{color:inherit; text-decoration:none;} :root button{font:inherit;} :root h1, :root h2, :root h3, :root h4{font-family:var(--font-display); font-weight:500; line-height:1.06; margin:0; letter-spacing:.005em;} :root p{margin:0;} :root ::selection{background:var(--accent); color:#fff;} /* focus */ :root :focus-visible{outline:2px solid var(--accent); outline-offset:3px;} :root .skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--dark); color:var(--on-dark); padding:.8rem 1.2rem; font-family:var(--font-sans); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;} :root .skip:focus{left:.75rem; top:.75rem;} /* ---------- layout helpers ---------- */ :root .wrap{max-width:var(--rail); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);} :root .wrap-wide{max-width:var(--rail-wide); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);} :root .wrap-narrow{max-width:var(--rail-narrow); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter);} /* grid items default to min-width:auto, which lets long words and form controls blow out their track — reset it everywhere we lay out in columns */ :root .split > *, :root .sticky-split > *, :root .cards > *, :root .tiers > *, :root .posts > *, :root .chapters > *, :root .addons > *, :root .quotes-3 > *, :root .foot-grid > *, :root .menu-inner > *, :root .menu-side > *, :root .post-feature > *, :root .article-nav > *, :root .form .grid-2 > *, :root .ilist .row > *{min-width:0;} :root .section{padding:var(--section-y) 0;} :root .section-sm{padding:var(--section-y-sm) 0;} :root .bg-surface{background:var(--surface);} :root .bg-dark{background:var(--dark); color:var(--on-dark);} :root .bg-deep{background:var(--deep); color:var(--on-dark);} :root .center{text-align:center;} :root .hr{height:1px; background:var(--line); border:0; margin:0;} /* ---------- type utilities ---------- */ :root .eyebrow{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.36em; font-size:.7rem; color:var(--muted); font-weight:400; display:inline-block; } :root .eyebrow-line{display:flex; align-items:center; gap:1rem;} :root .eyebrow-line::after{content:""; height:1px; width:clamp(32px,6vw,72px); background:var(--line); flex:0 0 auto;} :root .eyebrow-line.center-line{justify-content:center;} :root .eyebrow-line.center-line::before{content:""; height:1px; width:clamp(32px,6vw,72px); background:var(--line); flex:0 0 auto;} :root .h-xl{font-size:clamp(2.7rem,6.2vw,5.2rem);} :root .h-lg{font-size:clamp(2.3rem,4.8vw,3.9rem);} :root .h-md{font-size:clamp(1.9rem,3.6vw,2.9rem);} :root .h-sm{font-size:clamp(1.5rem,2.4vw,2rem);} :root .lead{font-size:clamp(1.02rem,1.35vw,1.15rem); color:var(--muted); line-height:1.9;} :root .small{font-size:.92rem; color:var(--muted);} :root .script{font-family:var(--font-display); font-style:italic; color:var(--accent);} :root .sig{font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,2.4vw,1.9rem); color:var(--muted);} :root .measure{max-width:56ch;} :root .measure-sm{max-width:44ch;} /* numeral motif */ :root .numeral{ font-family:var(--font-display); font-style:italic; font-weight:400; font-size:.95rem; letter-spacing:.12em; color:var(--accent); /* inline-block so a paragraph carrying this class still hugs its text, the way the design's did */ display:inline-block; } /* ---------- buttons & links ---------- core/button renders
, so the block's own class lands on the wrapper, not on the anchor the design drew. Every button rule therefore carries a second selector for the anchor, and the three variants are registered block styles (see inc/block-styles.php) so they are pickable in the editor. Raw .btn anchors in wp:html islands keep working unchanged. */ :root .btn, :root .wp-block-button__link{ display:inline-flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.7rem; padding:1.05rem 2.1rem; border:1px solid var(--dark); background:var(--dark); color:var(--on-dark); border-radius:var(--radius); cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); line-height:1; position:relative; } :root .btn:hover, :root .wp-block-button__link:hover{background:transparent; color:var(--dark);} :root .btn-ghost, :root .wp-block-button.is-style-ghost .wp-block-button__link{background:transparent; color:var(--fg); border-color:var(--fg);} :root .btn-ghost:hover, :root .wp-block-button.is-style-ghost .wp-block-button__link:hover{background:var(--fg); color:var(--bg);} :root .btn-ondark, :root .wp-block-button.is-style-ondark .wp-block-button__link{background:var(--on-dark); border-color:var(--on-dark); color:var(--dark);} :root .btn-ondark:hover, :root .wp-block-button.is-style-ondark .wp-block-button__link:hover{background:transparent; color:var(--on-dark);} :root .btn-ondark-ghost, :root .wp-block-button.is-style-ondark-ghost .wp-block-button__link{background:transparent; border-color:rgba(241,236,228,.5); color:var(--on-dark);} :root .btn-ondark-ghost:hover, :root .wp-block-button.is-style-ondark-ghost .wp-block-button__link:hover{background:var(--on-dark); color:var(--dark); border-color:var(--on-dark);} /* underline sweeps IN from the left on hover */ :root .tlink{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.7rem; color:var(--fg); display:inline-flex; align-items:center; gap:.7rem; padding-bottom:.4rem; position:relative; transition:color .25s ease; } :root .tlink::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s;} :root .tlink:hover{color:var(--accent);} :root .tlink:hover::after{right:0;} :root .tlink .arw{display:inline-block; transition:transform .25s ease;} :root .tlink:hover .arw{transform:translateX(5px);} :root .tlink-ondark{color:var(--on-dark);} :root .tlink-ondark:hover{color:#fff;} /* ---------- reveals ---------- Gated on .js (set inline in ) so no-JS visitors never see hidden content. .curtain is the same motion as .reveal — kept as a separate hook for figures. */ :root .js .reveal, :root .js .curtain{opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease;} :root .js .reveal.in, :root .js .curtain.in{opacity:1; transform:none;} :root .js .reveal[data-d="1"]{transition-delay:.1s;} :root .js .reveal[data-d="2"]{transition-delay:.2s;} :root .js .reveal[data-d="3"]{transition-delay:.3s;} :root .js .reveal[data-d="4"]{transition-delay:.4s;} :root .js .reveal[data-d="5"]{transition-delay:.5s;} :root .curtain{position:relative; overflow:hidden;} @media (prefers-reduced-motion:reduce){ :root .js .reveal, :root .js .curtain{opacity:1 !important; transform:none !important; transition:none !important;} html{scroll-behavior:auto;} } /* ---------- figures ---------- */ :root .fig{position:relative; overflow:hidden; background:var(--surface);} :root .fig img{width:100%; height:100%; object-fit:cover;} :root .fig-3x4{aspect-ratio:3/4;} :root .fig-4x5{aspect-ratio:4/5;} :root .fig-1x1{aspect-ratio:1/1;} :root .fig-4x3{aspect-ratio:4/3;} :root .fig-3x2{aspect-ratio:3/2;} :root .fig-16x9{aspect-ratio:16/9;} :root .fig-2x3{aspect-ratio:2/3;} :root .fig img{transition:transform 1.1s var(--ease);} :root .zoom:hover img{transform:scale(1.03);} /* ========================================================= NAV ========================================================= */ :root .nav{ position:fixed; top:0; left:0; right:0; z-index:80; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:1.05rem clamp(1.25rem,4vw,2.75rem); background:var(--bg); border-bottom:1px solid var(--line); transition:background .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease), box-shadow .5s var(--ease); } :root .nav .brand{ font-family:var(--font-display); font-size:1.5rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); justify-self:start; line-height:1; transition:color .4s var(--ease); } /* core/navigation renders , so our class lands one level above the list the design drew. Both shapes are styled: the nav keeps the grid placement, the list keeps the row. */ :root .nav-links{justify-self:center;} :root ul.nav-links, :root .nav-links > ul{display:flex; gap:clamp(1rem,2vw,2rem); list-style:none; margin:0; padding:0;} :root .nav-links a{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.8rem; color:var(--fg); opacity:.82; position:relative; padding-bottom:.25rem; transition:opacity .3s, color .3s; } :root .nav-links a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s;} :root .nav-links a:hover{opacity:1;} :root .nav-links a:hover::after, :root .nav-links a[aria-current="page"]::after{right:0;} :root .nav-links a[aria-current="page"]{opacity:1;} :root .nav-right{justify-self:end; display:flex; align-items:center; gap:1rem;} :root .nav .inquire, :root .nav .is-style-inquire .wp-block-button__link{ font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.76rem; color:var(--fg); background:transparent; border:1px solid var(--line); border-radius:0; padding:.68rem 1.25rem; min-height:0; line-height:inherit; transition:.4s var(--ease); } :root .nav .inquire:hover, :root .nav .is-style-inquire .wp-block-button__link:hover{background:var(--dark); color:var(--on-dark); border-color:var(--dark);} :root .nav.hide{transform:translateY(-100%);} :root .nav.scrolled{box-shadow:0 12px 34px rgba(42,37,33,.06);} /* transparent nav over a hero */ :root .nav.over{background:transparent; border-bottom-color:transparent;} :root .nav.over .brand, :root .nav.over .brand a, :root .nav.over .nav-links a, :root .nav.over .inquire, :root .nav.over .is-style-inquire .wp-block-button__link{color:#fff;} :root .nav.over .inquire, :root .nav.over .is-style-inquire .wp-block-button__link{border-color:rgba(255,255,255,.5);} :root .nav.over .inquire:hover, :root .nav.over .is-style-inquire .wp-block-button__link:hover{background:#fff; color:var(--fg); border-color:#fff;} :root .nav.over .nav-toggle span{background:#fff;} :root .nav-toggle{display:flex; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:.45rem; justify-self:end;} :root .nav-toggle span{display:block; width:26px; height:1.4px; background:var(--fg); transition:.35s var(--ease);} :root .nav-toggle:hover span:nth-child(2){transform:scaleX(.62); transform-origin:left;} /* full-screen menu */ :root .menu{ position:fixed; inset:0; z-index:90; background:var(--bg); display:grid; grid-template-columns:1fr; align-items:center; opacity:0; visibility:hidden; transition:opacity .5s var(--ease), visibility .5s; } :root .menu.open{opacity:1; visibility:visible;} :root .menu-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,6vw,5rem); align-items:center; max-width:var(--rail); margin:0 auto; padding:0 var(--gutter); width:100%;} :root .menu-close{position:absolute; top:1.15rem; right:clamp(1.25rem,4vw,2.75rem); background:none; border:0; cursor:pointer; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; color:var(--fg); padding:.6rem;} :root ul.menu-nav, :root .menu-nav > ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(.4rem,1.4vw,.9rem); counter-reset:mnav;} :root .menu-nav li{counter-increment:mnav;} :root .menu-nav a{ font-family:var(--font-display); font-size:clamp(2rem,5.2vw,3.4rem); line-height:1.12; color:var(--fg); display:inline-flex; align-items:baseline; gap:1rem; transition:color .35s var(--ease), transform .45s var(--ease); } /* The 01…07 numerals are drawn by a counter rather than a in the markup: core/navigation labels are plain text, and a counter also renumbers itself when the client adds or reorders a menu item. */ :root .menu-nav a::before{content:counter(mnav, decimal-leading-zero);} :root .menu-nav a .n, :root .menu-nav a::before{font-family:var(--font-sans); font-size:.6rem; letter-spacing:.24em; color:var(--accent); transform:translateY(-.7em);} :root .menu-nav a:hover{color:var(--accent); transform:translateX(10px);} :root .menu-side{border-left:1px solid var(--line); padding-left:clamp(1.5rem,4vw,3rem);} :root .menu-side a{font-size:.95rem; color:var(--muted); overflow-wrap:anywhere; transition:color .25s ease;} :root .menu-side a:hover{color:var(--fg);} :root .menu-side ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem;} /* collapsible blocks — click the label, the items unfold beneath it */ :root .menu-side details.blk{border-bottom:1px solid var(--line-soft);} :root .menu-side details.blk:last-child{border-bottom:0;} :root .menu-side summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 0; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.66rem; color:var(--muted); transition:color .25s ease; } :root .menu-side summary::-webkit-details-marker{display:none;} :root .menu-side summary:hover{color:var(--fg);} /* The +/× indicator is drawn as a pseudo-element instead of a in the markup: core/details stores its summary as plain text, so a span there would not survive an edit. Decorative glyphs belong in CSS anyway. */ :root .menu-side summary .ind, :root .menu-side summary::after{font-family:var(--font-sans); font-size:1rem; color:var(--accent); line-height:1; transition:transform .25s ease; flex:0 0 auto;} :root .menu-side summary::after{content:"+";} :root .menu-side details[open] summary .ind, :root .menu-side details[open] summary::after{transform:rotate(45deg);} :root .menu-side .blk-body ul{padding-bottom:1.1rem;} /* the same interruptible 0fr -> 1fr collapse the FAQ uses, scoped to .acc-anim (added by JS) so no-JS visitors keep native
*/ :root .acc-anim .blk-body{display:grid; grid-template-rows:0fr; opacity:0; transition:grid-template-rows .42s cubic-bezier(.33,1,.68,1), opacity .32s ease;} :root .acc-anim details.is-open .blk-body{grid-template-rows:1fr; opacity:1;} :root .acc-anim .blk-body > *{overflow:hidden; min-height:0;} :root .acc-anim details summary .ind, :root .acc-anim details summary::after{transform:none;} :root .acc-anim details.is-open summary .ind, :root .acc-anim details.is-open summary::after{transform:rotate(45deg);} @media (prefers-reduced-motion:reduce){:root .acc-anim .blk-body{transition:none;}} /* ========================================================= HOME HERO ========================================================= */ :root .hero{position:relative; width:100%; height:100svh; min-height:600px; overflow:hidden; background:var(--dark);} :root .hero > img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 42%;} :root .hero .scrim{position:absolute; inset:0; background:linear-gradient(180deg, rgba(38,33,29,.44) 0%, rgba(38,33,29,.06) 28%, rgba(38,33,29,.10) 58%, rgba(38,33,29,.46) 100%);} /* padding-bottom biases the title block into the clean sky above the couple */ :root .hero .overlay{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:var(--nav-h) 1.5rem 30vh;} :root .hero .wordmark{ font-family:var(--font-display); font-weight:400; letter-spacing:.14em; text-transform:uppercase; font-size:clamp(2.4rem,7.4vw,6.2rem); line-height:1; color:#fff; text-shadow:0 2px 40px rgba(30,25,20,.3); padding-left:.14em; } :root .hero .subtitle{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.52em; font-size:clamp(.6rem,1.15vw,.78rem); margin-top:1.7rem; padding-left:.52em; color:#fff; opacity:.94;} :root .hero .scroll-cue{ position:absolute; left:50%; bottom:2rem; transform:translateX(-50%); color:#fff; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.3em; font-size:.6rem; opacity:.8; display:flex; flex-direction:column; align-items:center; gap:.7rem; } :root .hero .scroll-cue i{display:block; width:1px; height:38px; background:rgba(255,255,255,.6); animation:cue 2.4s var(--ease) infinite;} @keyframes cue{0%{transform:scaleY(.2); transform-origin:top;}50%{transform:scaleY(1); transform-origin:top;} 51%{transform:scaleY(1); transform-origin:bottom;}100%{transform:scaleY(.2); transform-origin:bottom;}} /* one-shot Ken Burns, then it settles */ :root .hero > img{animation:kb 12s ease-out forwards;} @keyframes kb{from{transform:scale(1);} to{transform:scale(1.05);}} /* staggered hero entrance */ :root .hero .wordmark, :root .hero .subtitle, :root .hero .scroll-cue{opacity:0; animation:heroin .7s ease-out forwards;} :root .hero .wordmark{animation-delay:.2s;} :root .hero .subtitle{animation-delay:.35s;} :root .hero .scroll-cue{animation-delay:.5s;} @keyframes heroin{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;}} @media (prefers-reduced-motion:reduce){ :root .hero > img{animation:none;} :root .hero .wordmark, :root .hero .subtitle, :root .hero .scroll-cue{animation:none; opacity:1;} :root .hero .scroll-cue i{animation:none;} } /* ========================================================= PAGE HERO (interior pages) ========================================================= */ /* The title card is white on the light-beige page, so it reads as a card notched into the photograph without needing a band behind it. */ :root .phero{position:relative; background:var(--bg);} :root .phero .media{position:relative; height:clamp(46vh,58vh,640px); min-height:340px; overflow:hidden; background:var(--dark);} :root .phero .media img{width:100%; height:100%; object-fit:cover;} :root .phero .media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(38,33,29,.4) 0%, rgba(38,33,29,.10) 45%, rgba(38,33,29,.34) 100%);} :root .phero .plate{ position:relative; z-index:3; margin:calc(-1 * clamp(3rem,7vw,6rem)) auto 0; max-width:min(880px, calc(100% - 2 * var(--gutter))); background:var(--plate); padding:clamp(2.2rem,4.5vw,3.6rem) clamp(1.5rem,4vw,3.5rem) clamp(1.8rem,3.5vw,2.8rem); text-align:center; } :root .phero .plate .eyebrow{margin-bottom:1.1rem;} :root .phero .plate h1{font-size:clamp(2.4rem,5.4vw,4.4rem); margin-bottom:1.1rem;} :root .phero .plate .lead{max-width:52ch; margin:0 auto;} :root .phero-min{padding:calc(var(--nav-h) + clamp(3.5rem,8vw,7rem)) 0 clamp(2rem,4vw,3rem); text-align:center; background:var(--bg);} :root .phero-min h1{font-size:clamp(2.4rem,5.4vw,4.4rem); margin:1.1rem 0;} /* breadcrumb */ :root .crumbs{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.63rem; color:var(--muted); display:flex; gap:.6rem; align-items:center; justify-content:center; flex-wrap:wrap;} :root .crumbs a:hover{color:var(--fg);} :root .crumbs span{opacity:.5;} /* ========================================================= EDITORIAL SPLIT ========================================================= */ :root .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5.5rem); align-items:center;} :root .split.wide-media{grid-template-columns:1.15fr .85fr;} :root .split.wide-text{grid-template-columns:.85fr 1.15fr;} :root .split .txt > * + *{margin-top:1.2rem;} :root .split .txt .eyebrow{margin-bottom:.4rem;} :root .split .txt .btn, :root .split .txt .tlink{margin-top:.9rem;} :root .media-first .txt{order:2;} :root .media-first .fig-col{order:1;} /* symmetric image pair — two equal 2:3 frames, no offset, no overlap. .a / .b / .flip survive in the markup but carry no asymmetry any more. */ :root .pair{display:grid; grid-template-columns:1fr 1fr; gap:clamp(.7rem,1.4vw,1.15rem); align-items:start;} :root .pair > *{grid-column:auto; margin-top:0; box-shadow:none; aspect-ratio:2/3;} /* sticky split (text scrolls, image holds) */ :root .sticky-split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start;} :root .sticky-split .hold{position:sticky; top:calc(var(--nav-h) + 2.5rem);} :root .sticky-split .flow > * + *{margin-top:clamp(2.5rem,5vw,4rem);} /* ========================================================= MARQUEE ========================================================= */ :root .marquee{position:relative; width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);} :root .marquee-track{display:flex; gap:1.15rem; width:max-content; animation:scrollx 60s linear infinite;} :root .marquee:hover .marquee-track{animation-play-state:paused;} :root .marquee .frame{width:clamp(210px,24vw,330px); flex:0 0 auto; aspect-ratio:3/4; overflow:hidden; background:var(--surface);} :root .marquee .frame img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);} :root .marquee .frame:hover img{transform:scale(1.03);} @keyframes scrollx{from{transform:translateX(0);} to{transform:translateX(calc(-50% - .575rem));}} /* word marquee */ :root .wordstrip{overflow:hidden; padding:clamp(1.6rem,3vw,2.4rem) 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);} :root .wordstrip .track{display:flex; width:max-content; animation:scrollx 42s linear infinite; gap:0;} :root .wordstrip span{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,3vw,2.4rem); color:var(--accent); padding:0 clamp(1.2rem,3vw,2.4rem); white-space:nowrap; opacity:.85; } :root .wordstrip i{align-self:center; width:5px; height:5px; border-radius:50%; background:var(--line); flex:0 0 auto;} /* Block form: each word is an ordinary paragraph and the bead between words is drawn by CSS, so the strip stays editable in the block editor. The margins reproduce the span's left/right padding exactly — word, gap, bead, gap, word. */ :root .wordstrip .track > p{ font-family:var(--font-display); font-style:italic; font-size:clamp(1.5rem,3vw,2.4rem); color:var(--accent); white-space:nowrap; opacity:.85; padding:0; margin:0; display:flex; align-items:center; } :root .wordstrip .track > p::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--line); flex:0 0 auto; margin-inline:clamp(1.2rem,3vw,2.4rem); } @media (prefers-reduced-motion:reduce){ :root .marquee{overflow-x:auto;} :root .marquee-track{animation:none;} :root .wordstrip .track{animation:none;} } /* ========================================================= GALLERY GRIDS ========================================================= */ :root .gal{display:grid; gap:clamp(.8rem,1.6vw,1.4rem);} :root .gal-3{grid-template-columns:repeat(3,1fr);} :root .gal-2{grid-template-columns:repeat(2,1fr);} :root .gal-item{position:relative; overflow:hidden; background:var(--surface); cursor:zoom-in; display:block; width:100%; border:0; padding:0;} :root .gal-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);} :root .gal-item:hover img{transform:scale(1.03);} :root .gal-item::after{content:""; position:absolute; inset:0; background:rgba(42,37,33,0); transition:background .5s var(--ease);} :root .gal-item:hover::after{background:rgba(42,37,33,.08);} /* symmetric gallery wall — every row is either three equal 2:3 tiles or one centred full-width band. No offsets, no uneven spans. */ :root .mosaic{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,1.6vw,1.4rem); align-items:start;} :root .mosaic .m{overflow:hidden; background:var(--surface); position:relative; cursor:zoom-in; border:0; padding:0; display:block; width:100%; aspect-ratio:2/3;} :root .mosaic .m img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);} :root .mosaic .m:hover img{transform:scale(1.03);} :root .mosaic .band{grid-column:1 / -1; aspect-ratio:16/9;} /* lightbox */ :root .lbox{position:fixed; inset:0; z-index:120; background:rgba(28,24,20,.975); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s;} :root .lbox.open{opacity:1; visibility:visible;} :root .lbox img{max-width:min(92vw,1100px); max-height:82vh; object-fit:contain; box-shadow:0 30px 90px rgba(0,0,0,.4);} :root .lbox .lb-close, :root .lbox .lb-prev, :root .lbox .lb-next{ position:absolute; background:none; border:0; color:#f1ece4; cursor:pointer; padding:1rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; opacity:.8; transition:opacity .3s; } :root .lbox .lb-close:hover, :root .lbox .lb-prev:hover, :root .lbox .lb-next:hover{opacity:1;} :root .lbox .lb-close{top:1rem; right:1.2rem;} :root .lbox .lb-prev{left:.6rem; top:50%; transform:translateY(-50%); font-size:1.6rem; letter-spacing:0;} :root .lbox .lb-next{right:.6rem; top:50%; transform:translateY(-50%); font-size:1.6rem; letter-spacing:0;} :root .lbox .lb-count{position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); color:#f1ece4; font-family:var(--font-sans); letter-spacing:.24em; font-size:.66rem; opacity:.75;} /* ========================================================= CARDS / COLLECTIONS ========================================================= */ :root .cards{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,3vw,2.6rem);} :root .card{display:flex; flex-direction:column;} :root .card .fig{aspect-ratio:3/4; margin-bottom:1.5rem;} :root .card .k{display:flex; align-items:baseline; gap:.8rem; margin-bottom:.6rem;} :root .card h3{font-size:clamp(1.6rem,2.4vw,2rem);} :root .card p:not(.numeral){color:var(--muted); font-size:.97rem; line-height:1.8; margin-bottom:1.3rem; flex:1;} /* index list (numbered rows) */ :root .ilist{border-top:1px solid var(--line);} :root .ilist .row{ display:grid; grid-template-columns:auto 1fr auto; gap:clamp(1rem,3vw,2.5rem); align-items:center; border-bottom:1px solid var(--line); padding:clamp(1.4rem,2.6vw,2.1rem) 0; transition:padding .45s var(--ease); } :root .ilist .row:hover{padding-left:clamp(.5rem,1.5vw,1.2rem);} :root .ilist .row .n{font-family:var(--font-sans); font-size:.64rem; letter-spacing:.24em; color:var(--accent);} :root .ilist .row h3{font-size:clamp(1.4rem,2.6vw,2.1rem);} :root .ilist .row .desc{color:var(--muted); font-size:.95rem; margin-top:.4rem; max-width:60ch;} :root .ilist .row .go{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.64rem; color:var(--muted); white-space:nowrap; transition:color .35s;} :root .ilist .row:hover .go{color:var(--fg);} /* process chapters */ :root .chapters{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.4rem,3vw,2.6rem);} :root .chapter .n{font-family:var(--font-display); font-style:italic; font-size:clamp(2.4rem,4vw,3.4rem); color:var(--line); line-height:1; display:block; margin-bottom:.7rem;} :root .chapter h3{font-size:1.35rem; margin-bottom:.6rem;} :root .chapter p{color:var(--muted); font-size:.93rem; line-height:1.8;} :root .chapter{border-top:1px solid var(--line); padding-top:1.4rem;} /* ========================================================= PRICING ========================================================= */ :root .tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.4vw,2rem); align-items:stretch;} :root .tier{background:var(--bg); border:1px solid var(--line); padding:clamp(1.8rem,3vw,2.6rem); display:flex; flex-direction:column;} :root .tier.feature{background:var(--dark); color:var(--on-dark); border-color:var(--dark);} :root .tier.feature .price, :root .tier.feature h3{color:#fff;} :root .tier.feature li{color:rgba(241,236,228,.85); border-color:rgba(241,236,228,.18);} :root .tier.feature .eyebrow{color:#ddd3c4;} :root .tier .eyebrow{margin-bottom:1rem;} :root .tier h3{font-size:clamp(1.7rem,2.6vw,2.2rem); margin-bottom:.5rem;} :root .tier .price{font-family:var(--font-display); font-size:1.55rem; color:var(--muted); margin-bottom:1.4rem;} :root .tier ul{list-style:none; margin:0 0 1.8rem; padding:0; flex:1;} :root .tier li{font-size:.94rem; color:var(--muted); padding:.7rem 0; border-bottom:1px solid var(--line-soft); line-height:1.65;} :root .tier li:last-child{border-bottom:0;} /* min-height keeps all three buttons the same height even when one label wraps, so their tops sit on one line and not just their bottoms */ :root .tier .btn, :root .tier .wp-block-buttons, :root .tier .wp-block-button, :root .tier .wp-block-button__link{width:100%; min-height:3.6rem;} /* addons */ :root .addons{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.2rem,2.6vw,2.2rem); align-items:stretch;} /* flex column + growing paragraph lands every price on one line across the row */ :root .addon{border-top:1px solid var(--line); padding-top:1.2rem; display:flex; flex-direction:column; height:100%;} :root .addon h4{font-family:var(--font-display); font-size:1.25rem; margin-bottom:.45rem;} :root .addon p:not(.amt){color:var(--muted); font-size:.92rem; flex:1 0 auto;} :root .addon .amt{font-family:var(--font-sans); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); margin-top:.6rem; display:block;} /* ========================================================= TESTIMONIALS ========================================================= */ :root .quote-block{text-align:center;} /* The opening quote glyph is decorative, so it is drawn by CSS rather than carried as an aria-hidden the editor would expose as editable text. */ :root .quote-block .mark, :root .quote-block::before{font-family:var(--font-display); font-size:5rem; line-height:.35; color:var(--line); display:block; margin-bottom:1.4rem;} :root .quote-block::before{content:"\201C";} :root .quote-block .q{font-family:var(--font-display); font-style:italic; font-weight:400; font-size:clamp(1.6rem,3.2vw,2.5rem); line-height:1.36; max-width:24ch; margin:0 auto;} :root .quote-block .attr{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.28em; font-size:.68rem; color:var(--muted); margin-top:2rem;} :root .bg-dark .quote-block .mark, :root .bg-dark .quote-block::before{color:rgba(241,236,228,.28);} :root .bg-dark .quote-block .attr{color:rgba(241,236,228,.7);} :root .quotes-3{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,4vw,3.4rem);} :root .qcard{border-top:1px solid var(--line); padding-top:1.6rem;} :root .qcard .q{font-family:var(--font-display); font-style:italic; font-size:clamp(1.15rem,1.7vw,1.4rem); line-height:1.5;} :root .qcard .attr{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.64rem; color:var(--muted); margin-top:1.2rem;} /* ========================================================= CONTACT PAGE The form sits on a white plate — the same card language as the page-hero — with the studio details beside it as quiet hairline rows. ========================================================= */ :root .form-plate{background:var(--plate); padding:clamp(2rem,4vw,3.5rem);} :root .form-plate--center{max-width:860px; margin:0 auto;} :root .form-plate .eyebrow{margin-bottom:1.1rem;} :root .form-plate h2{margin-bottom:clamp(1.6rem,3vw,2.4rem);} :root .form-plate .form{gap:clamp(1.5rem,2.4vw,2rem);} :root .form-foot{display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; margin-top:.3rem;} :root .form-foot .note{margin:0;} :root .form-foot .form-msg{width:100%; padding:0;} @media (max-width:560px){ :root .form-foot .btn, :root .form-foot .wp-block-button{width:100%;} } /* ========================================================= FORMS ========================================================= */ :root .form{display:grid; gap:1.4rem;} :root .form .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem;} :root .field{display:flex; flex-direction:column; gap:.55rem; min-width:0;} :root .field label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.63rem; color:var(--muted);} :root .field input, :root .field select, :root .field textarea{ width:100%; min-width:0; font-family:var(--font-serif); font-size:.98rem; color:var(--fg); padding:.9rem 0; border:0; border-bottom:1px solid var(--line); background:transparent; border-radius:0; transition:border-color .35s var(--ease); } :root .field textarea{resize:vertical; min-height:130px; line-height:1.7;} :root .field input:focus, :root .field select:focus, :root .field textarea:focus{outline:none; border-bottom-color:var(--accent);} :root .field input::placeholder, :root .field textarea::placeholder{color:var(--accent); opacity:.65;} :root .field select{appearance:none; cursor:pointer; background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position:calc(100% - 12px) calc(50% + 2px), calc(100% - 7px) calc(50% + 2px); background-size:5px 5px, 5px 5px; background-repeat:no-repeat;} :root .form .note{font-size:.85rem; color:var(--muted);} :root .form-msg{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.2em; font-size:.68rem; color:var(--accent); padding:.9rem 0; display:none;} :root .form-msg.show{display:block;} /* inline signup */ :root .signup{display:flex; gap:.75rem; flex-wrap:wrap; max-width:480px;} :root .signup input{flex:1 1 220px; min-width:0; font-family:var(--font-sans); letter-spacing:.06em; font-size:.8rem; padding:1rem 1.1rem; border:1px solid var(--line); background:var(--bg); color:var(--fg);} :root .signup input::placeholder{color:var(--muted); text-transform:uppercase; letter-spacing:.16em; font-size:.68rem;} :root .signup input:focus{outline:none; border-color:var(--accent);} :root .bg-dark .signup input{background:transparent; border-color:rgba(241,236,228,.32); color:var(--on-dark);} :root .bg-dark .signup input::placeholder{color:rgba(241,236,228,.6);} /* ========================================================= ACCORDION (FAQ) ========================================================= */ :root .faq{border-top:1px solid var(--line);} :root .faq details{border-bottom:1px solid var(--line);} :root .faq summary{ list-style:none; cursor:pointer; padding:clamp(1.2rem,2.2vw,1.7rem) 0; display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; font-family:var(--font-display); font-size:clamp(1.15rem,2vw,1.5rem); color:var(--fg); transition:color .3s; } :root .faq summary::-webkit-details-marker{display:none;} :root .faq summary:hover{color:var(--accent);} :root .faq summary .ind, :root .faq summary::after{font-family:var(--font-sans); font-size:1.1rem; color:var(--accent); line-height:1; transition:transform .25s ease; flex:0 0 auto;} :root .faq summary::after{content:"+";} :root .faq details[open] summary .ind, :root .faq details[open] summary::after{transform:rotate(45deg);} :root .faq .ans{padding:0 0 clamp(1.3rem,2.4vw,1.9rem); color:var(--muted); max-width:70ch;} :root .faq .ans p + p{margin-top:.9rem;} /* Smooth accordion: CSS-driven 0fr -> 1fr grid collapse, no per-frame JS and interruptible. Scoped to .faq-anim (added by site.js) so no-JS visitors keep native
behaviour. site.js wraps each .ans in the .faq-body element. */ :root .faq-anim .ans{padding-bottom:0;} :root .faq-anim .faq-body{display:grid; grid-template-rows:0fr; padding-bottom:0; opacity:0; transition:grid-template-rows .42s cubic-bezier(.33,1,.68,1), padding-bottom .42s cubic-bezier(.33,1,.68,1), opacity .32s ease;} :root .faq-anim details.is-open .faq-body{grid-template-rows:1fr; padding-bottom:clamp(1.3rem,2.4vw,1.9rem); opacity:1;} :root .faq-anim .faq-body > *{overflow:hidden; min-height:0;} :root .faq-anim details summary .ind, :root .faq-anim details summary::after{transform:none;} :root .faq-anim details.is-open summary .ind, :root .faq-anim details.is-open summary::after{transform:rotate(45deg);} @media (prefers-reduced-motion:reduce){:root .faq-anim .faq-body{transition:none;}} /* ========================================================= JOURNAL ========================================================= */ :root .posts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.6rem,3.4vw,2.8rem); align-items:stretch;} /* Fallback for browsers without subgrid: flex column, only the excerpt grows (`p:not(.meta)` matters — the meta line is a

too and would otherwise absorb slack and shove the title down), plus a two-line floor on the title so a one-line headline still leaves the excerpt starting on the same line. */ :root .post-card{display:flex; flex-direction:column; height:100%;} :root .post-card .fig{aspect-ratio:4/3; margin-bottom:1.3rem; flex:0 0 auto;} :root .post-card .meta{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.62rem; color:var(--accent); margin-bottom:.7rem; flex:0 0 auto;} :root .post-card h3{font-size:clamp(1.35rem,2.2vw,1.75rem); margin-bottom:.6rem; transition:color .35s; min-height:2.12em;} :root .post-card:hover h3{color:var(--accent);} :root .post-card p{color:var(--muted); font-size:.94rem; margin-bottom:1rem;} :root .post-card p:not(.meta){flex:1 0 auto;} :root .post-card .tlink{align-self:flex-start; margin-top:auto;} /* Archive treatment for the journal grid: a display-size headline and a hairline closing each card. The homepage teaser row keeps the lighter 4:3 card. The cover frame is 3:2 because the journal covers are shot 1536x1024 — the reference site uses a 4:5 portrait frame, but its covers are portrait. Forcing 3:2 sources into 4:5 centre-crops away 58% of the width, which took the album out of one cover and the couple out of another. 3:2 shows the whole frame. */ :root .posts-journal .post-card .fig{aspect-ratio:3/2;} :root .posts-journal .post-card h3{font-size:clamp(1.6rem,2.6vw,2.15rem); margin-bottom:.7rem;} :root .posts-journal .post-card .tlink{padding-bottom:0; margin-bottom:1.6rem;} :root .posts-journal .post-card{border-bottom:1px solid var(--line);} :root .bg-surface .posts-journal .post-card{border-bottom-color:var(--line);} /* Subgrid: image, meta, title, excerpt and link each share one row across the whole set of cards, so all four bands line up whatever the copy length. row-gap:0 stops the grid's 2.8rem card gap from leaking between the rows inside a card — the internal spacing stays on the margins above. */ @supports (grid-template-rows: subgrid){ :root .posts{grid-template-rows:repeat(5, auto);} :root .post-card{display:grid; grid-row:span 5; grid-template-rows:subgrid; row-gap:0; height:auto;} :root .post-card h3{min-height:0;} :root .post-card .tlink{margin-top:0;} } :root .post-feature{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(2rem,5vw,4rem); align-items:center;} :root .post-feature .fig{aspect-ratio:16/10;} /* article body */ :root .article{max-width:var(--rail-narrow); margin:0 auto; padding:0 var(--gutter);} :root .article p{font-size:1.07rem; line-height:1.95; color:#453e38;} :root .article p + p{margin-top:1.5rem;} :root .article h2{font-size:clamp(1.8rem,3.2vw,2.5rem); margin:clamp(2.6rem,5vw,3.8rem) 0 1.1rem;} :root .article h3{font-size:clamp(1.35rem,2.2vw,1.7rem); margin:clamp(2rem,4vw,2.8rem) 0 .8rem;} :root .article blockquote{margin:clamp(2.4rem,5vw,3.4rem) 0; padding-left:clamp(1.2rem,3vw,2rem); border-left:1px solid var(--accent);} :root .article blockquote p{font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem); line-height:1.5; color:var(--fg);} :root .article ul{margin:1.4rem 0; padding-left:1.2rem; color:#453e38;} :root .article li{margin:.55rem 0; line-height:1.85;} :root .article .cap{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem; color:var(--muted); margin-top:.8rem; text-align:center;} :root .article figure{margin:clamp(2.4rem,5vw,3.6rem) 0;} :root .article-wide{max-width:var(--rail); margin-left:auto; margin-right:auto; padding:0 var(--gutter);} /* ---------- journal: topics + search ---------- Topics are ordinary links to real archive pages, so they stay available with scripting off. Search cannot be, so it is the only part gated behind .js — a dead search box would be worse than none. */ :root .topics-bar{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-bottom:clamp(1.4rem,2.6vw,2rem); border-bottom:1px solid var(--line); margin-bottom:clamp(2rem,4vw,3rem);} /* Bordered chips with a count, filling on hover — square, because the whole system is --radius:0 and a rounded pill would be the one soft corner on the site. */ :root .topics{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;} :root .topic{ display:inline-flex; align-items:baseline; gap:.55rem; padding:.72rem 1.15rem; border:1px solid var(--line); border-radius:var(--radius); font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.18em; font-size:.63rem; color:var(--muted); background:transparent; cursor:pointer; transition:background .25s ease, border-color .25s ease, color .25s ease; } :root .topic i{font-style:normal; font-size:.55rem; letter-spacing:.08em; color:var(--accent); transition:color .25s ease;} :root .topic:hover{color:var(--fg); border-color:var(--fg);} :root .topic[aria-current="page"]{background:var(--dark); border-color:var(--dark); color:var(--on-dark);} :root .topic[aria-current="page"] i{color:rgba(241,236,228,.7);} :root .topic-search{display:none;} :root .js .topic-search{display:flex; align-items:center; gap:.6rem; border-bottom:1px solid var(--line); padding:.45rem 0; min-width:min(240px,100%); transition:border-color .3s ease;} :root .topic-search svg{color:var(--accent); flex:0 0 auto;} :root .topic-search input{flex:1; min-width:0; border:0; background:transparent; outline:none; padding:.25rem 0; font-family:var(--font-sans); font-size:.72rem; letter-spacing:.12em; color:var(--fg);} :root .topic-search input::placeholder{color:var(--accent); text-transform:uppercase; letter-spacing:.18em; font-size:.64rem;} :root .topic-search:focus-within{border-color:var(--accent);} :root .topic-search input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none;} :root .journal-empty{display:none; padding:clamp(2.5rem,6vw,4.5rem) 0; text-align:center;} :root .journal-empty.show{display:block;} :root .journal-empty p{font-family:var(--font-display); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.7rem); color:var(--muted);} :root .journal-empty button{margin-top:1.2rem;} /* the small dot separator used in card meta and article datelines */ :root .dot{display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.45; vertical-align:middle; margin:0 .15rem;} /* ---------- article head + share ---------- */ :root .post-back{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.66rem; color:var(--muted); display:inline-flex; align-items:center; gap:.6rem; position:relative; padding-bottom:.3rem; margin-bottom:1.6rem; transition:color .25s ease;} :root .post-back .arw{transition:transform .25s ease;} :root .post-back:hover{color:var(--fg);} :root .post-back:hover .arw{transform:translateX(-4px);} :root .dateline{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.62rem; color:var(--muted);} :root .dateline .dl-cat{color:var(--accent); position:relative; transition:color .25s ease;} :root .dateline .dl-cat:hover{color:var(--fg);} :root .post-share{display:flex; align-items:center; gap:clamp(1rem,2.4vw,1.8rem); flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.4rem;} :root .ps-label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.26em; font-size:.62rem; color:var(--muted); margin-right:auto;} :root .ps-link{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.2em; font-size:.64rem; color:var(--fg); position:relative; padding-bottom:.25rem; transition:color .25s ease;} :root .ps-link::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s;} :root .ps-link:hover{color:var(--accent);} :root .ps-link:hover::after{right:0;} @media (max-width:560px){ :root .post-share{gap:1rem;} :root .ps-label{width:100%; margin-right:0;} } /* ---------- journal: load more ---------- Sits where the pagination was, in the same chip language as the topics above it: the chips narrow the listing, this one extends it. The arrow points down because that is where the next cards appear. */ :root .journal-more{display:flex; justify-content:center; margin-top:clamp(2.6rem,5vw,4rem);} :root .journal-more .btn{gap:1rem; min-width:15rem;} :root .journal-more .btn::after{content:"\2193"; font-size:.85rem;} /* Busy without moving: no spinner, no size change, just clearly not accepting a second press. */ :root .journal-more .btn[aria-busy="true"]{opacity:.45; cursor:progress;} /* journal pagination — only rendered once the posts spill past one page */ :root .pagination{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:clamp(2.6rem,5vw,4rem); padding-top:clamp(1.6rem,3vw,2.2rem); border-top:1px solid var(--line);} :root .pagination .pg-step{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.68rem; color:var(--fg); position:relative; padding-bottom:.35rem; transition:color .25s ease;} :root .pagination .pg-step::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .3s;} :root .pagination a.pg-step:hover{color:var(--accent);} :root .pagination a.pg-step:hover::after{right:0;} :root .pagination .pg-step.is-off{color:var(--accent); opacity:.4; cursor:default;} :root .pg-nums{list-style:none; display:flex; align-items:center; gap:.35rem; margin:0; padding:0;} :root .pg-nums a{display:inline-flex; align-items:center; justify-content:center; min-width:2.4rem; height:2.4rem; font-family:var(--font-sans); font-size:.72rem; letter-spacing:.08em; color:var(--muted); border:1px solid transparent; transition:color .25s ease, border-color .25s ease;} :root .pg-nums a:hover{color:var(--fg); border-color:var(--line);} :root .pg-nums a[aria-current="page"]{color:var(--fg); border-color:var(--fg);} @media (max-width:560px){ :root .pagination{justify-content:center;} :root .pg-nums{order:-1; width:100%; justify-content:center;} } /* ========================================================= ARTICLE SHEET The whole story lives on one white sheet — head, cover, prose, share — after the clara-hayes article sheet, squared off for this house. Prev/next follow as two bordered cards on the page below. ========================================================= */ :root .article-sheet{ width:min(1040px, calc(100% - 2rem)); margin:calc(var(--nav-h) + clamp(1.5rem,3vw,2.5rem)) auto clamp(2.5rem,4.5vw,4rem); background:var(--plate); padding:clamp(2.2rem,4.5vw,4rem) clamp(1.2rem,3.5vw,3rem) clamp(2.4rem,4.5vw,3.5rem); } :root .article-head{text-align:center; max-width:var(--rail-narrow); margin:0 auto clamp(2rem,4vw,3rem); padding:0 var(--gutter);} :root .article-head h1{font-size:clamp(2.2rem,4.8vw,3.8rem); margin:1.2rem 0 1rem;} :root .article-cover{background:var(--surface);} :root .article-flow{display:block; padding:clamp(2.4rem,4.5vw,3.6rem) 0 0;} /* inside the sheet the wide gallery rows span the sheet, not the page rail */ :root .article-sheet .article-wide{max-width:none; padding:0;} :root .article-sheet .post-share{margin-top:clamp(2.2rem,4vw,3rem);} :root .article-nav{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(.9rem,1.6vw,1.25rem); width:min(1040px, calc(100% - 2rem)); margin:0 auto; padding-bottom:clamp(3rem,6vw,5rem); } :root .an-item{ display:flex; flex-direction:column; gap:.55rem; padding:clamp(1.4rem,2.4vw,1.9rem) clamp(1.5rem,2.6vw,2rem); border:1px solid var(--line); background:var(--plate); transition:border-color .25s ease, transform .25s ease; } :root .an-item:hover{border-color:var(--accent); transform:translateY(-3px);} :root .an-label{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.6rem; color:var(--accent);} :root .an-item h4{font-family:var(--font-display); font-weight:500; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.3; transition:color .25s ease;} :root .an-item:hover h4{color:var(--accent);} :root .an-next{text-align:right; align-items:flex-end;} @media (max-width:700px){ :root .article-nav{grid-template-columns:1fr;} :root .an-next{text-align:left; align-items:flex-start;} } @media (prefers-reduced-motion:reduce){ :root .an-item:hover{transform:none;} } /* ========================================================= UTILITY PAGES Links-in-bio, coming soon, thank-you and legal pages — the clara-hayes utility set, rendered in this house's language. ========================================================= */ /* centred single-purpose page (coming soon, form submitted) */ :root .utility{min-height:calc(100svh - var(--nav-h)); display:flex; align-items:center; padding:calc(var(--nav-h) + var(--section-y-sm)) 0 var(--section-y-sm);} :root .utility .inner{max-width:560px; margin:0 auto; padding:0 var(--gutter); text-align:center;} :root .utility h1{font-size:clamp(2.4rem,5.4vw,4rem); margin:1.2rem 0 1rem;} :root .utility .lead{margin-bottom:2rem;} :root .utility .acts{display:flex; justify-content:center; gap:1rem; flex-wrap:wrap;} :root .utility .signup{justify-content:center; margin:0 auto;} :root .utility .back{margin-top:2.2rem;} /* link-in-bio */ :root .links-page{max-width:460px; margin:0 auto; padding:calc(var(--nav-h) + clamp(3rem,7vw,5rem)) var(--gutter) var(--section-y-sm); text-align:center;} /* the one deliberately round element on the site — the user asked for clara-hayes' avatar exactly: 156px circle */ :root .links-avatar{width:156px; height:156px; border-radius:50%; object-fit:cover; object-position:50% 18%; margin:0 auto 1.6rem; display:block;} :root .links-page h1{font-size:clamp(1.9rem,4vw,2.5rem); margin:.9rem 0 .6rem; letter-spacing:.1em; text-transform:uppercase;} :root .links-page .lead{font-size:1rem; margin-bottom:2.2rem;} :root .link-stack{display:flex; flex-direction:column; gap:.8rem; margin-bottom:2rem;} :root .link-stack a{ display:block; padding:1.15rem 1.4rem; border:1px solid var(--line); background:var(--plate); font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.68rem; color:var(--fg); transition:background .3s ease, color .3s ease, border-color .3s ease, transform .25s ease; } :root .link-stack a:hover{background:var(--dark); border-color:var(--dark); color:var(--on-dark); transform:translateY(-2px);} :root .social-line{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.22em; font-size:.64rem; color:var(--muted);} :root .social-line a{padding:0 .2rem; transition:color .25s ease;} :root .social-line a:hover{color:var(--fg);} @media (prefers-reduced-motion:reduce){ :root .link-stack a:hover{transform:none;} } /* legal pages ride the article sheet; their head has no cover or dateline */ :root .legal-head{margin-bottom:clamp(1.5rem,3vw,2rem);} :root .legal-updated{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.62rem; color:var(--accent); margin-top:1.2rem;} /* ========================================================= CTA BAND Airy closing band after the clara-hayes cta-band: one generous beige strip, headline | line of copy | action, no photograph. Replaces the old photo+dark split that sat with zero padding against the footer strip and read cramped. The hairline keeps its edge on pages that end in another --surface section. ========================================================= */ :root .cta-band{background:var(--band); border-top:1px solid var(--line); padding:clamp(4.5rem,7.5vw,7rem) 0;} :root .cta-band .inner{display:grid; grid-template-columns:1.05fr .95fr auto; align-items:center; gap:clamp(2rem,5.5vw,5rem);} :root .cta-band .eyebrow{display:inline-flex; margin-bottom:1rem;} :root .cta-band h2{font-size:clamp(2rem,3.8vw,3.1rem);} :root .cta-band .lead{max-width:38ch;} :root .cta-band .act{display:flex; flex-direction:column; align-items:stretch; gap:.9rem; min-width:15rem;} @media (max-width:960px){ :root .cta-band .inner{grid-template-columns:1fr; gap:1.6rem;} :root .cta-band .lead{max-width:56ch;} :root .cta-band .act{flex-direction:row; flex-wrap:wrap; min-width:0;} } @media (max-width:760px){ :root .cta-band .inner{text-align:center; justify-items:center;} :root .cta-band .eyebrow-line{justify-content:center;} :root .cta-band .act{flex-direction:column; width:100%; max-width:22rem;} } /* ========================================================= FOOTER ========================================================= */ :root .footer{background:var(--dark); color:var(--on-dark);} /* Instagram strip — six square tiles reading as one continuous band. Hovering a tile dims it and centres an Instagram glyph. */ :root .igstrip{display:grid; grid-template-columns:repeat(6,1fr); background:var(--surface);} :root .igstrip a{aspect-ratio:1/1; overflow:hidden; display:block; background:#4a4643; position:relative;} :root .igstrip img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), opacity .45s; opacity:.92;} :root .igstrip a::after{ content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5'%3E%3Crect x='2' y='2' width='20' height='20' rx='5.5'/%3E%3Ccircle cx='12' cy='12' r='4.3'/%3E%3Ccircle cx='17.2' cy='6.8' r='0.65' fill='white' stroke='none'/%3E%3C/svg%3E"); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(30,26,22,.42); opacity:0; transition:opacity .3s ease; pointer-events:none; } :root .igstrip a:hover::after, :root .igstrip a:focus-visible::after{opacity:1;} :root .igstrip a:hover img{transform:scale(1.05); opacity:1;} :root .foot-main{padding:clamp(3.5rem,7vw,6rem) 0 2.5rem;} :root .foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(1.8rem,4vw,3.5rem); align-items:start;} :root .foot-brand .fb-word{font-family:var(--font-display); font-size:1.9rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; line-height:1.1;} :root .foot-brand .fb-tag{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.28em; font-size:.62rem; color:rgba(241,236,228,.85); margin-top:1rem;} :root .foot-brand p:not(.fb-word):not(.fb-tag){color:rgba(241,236,228,.72); font-size:.93rem; margin-top:1.4rem; max-width:34ch;} :root .foot-col h4{font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.24em; font-size:.64rem; font-weight:400; color:#ddd3c4; margin:0 0 1.2rem;} :root .foot-col ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem;} :root .foot-col a, :root .foot-col p, :root .foot-col li{font-size:.93rem; color:rgba(241,236,228,.82);} :root .foot-col li{min-height:1.78rem;} :root .foot-col a{position:relative; transition:color .25s ease;} :root .foot-col a::after{content:""; position:absolute; left:0; right:100%; bottom:-3px; height:1px; background:currentColor; transition:right .3s;} :root .foot-col a:hover{color:#fff;} :root .foot-col a:hover::after{right:0;} :root .foot-bottom{border-top:1px solid rgba(241,236,228,.16); margin-top:clamp(2.5rem,5vw,4rem); padding:1.8rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.18em; font-size:.62rem; color:rgba(241,236,228,.75);} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1080px){ :root .nav-links{gap:1rem;} :root .nav-links a{font-size:.72rem; letter-spacing:.15em;} } /* the enlarged nav type needs more room — hand over to the burger earlier */ @media (max-width:1060px){ :root .nav{grid-template-columns:1fr auto; padding:.95rem 1.25rem;} :root .nav > nav{display:none;} :root .nav .inquire{display:none;} } @media (max-width:960px){ :root .menu-inner{grid-template-columns:1fr; gap:1.8rem; align-content:start;} :root .menu{align-items:start; padding-top:calc(var(--nav-h) + 1rem); overflow-y:auto;} /* the numbered list stays the hero, at a size where all seven fit a phone */ :root ul.menu-nav, :root .menu-nav > ul{gap:.4rem;} :root .menu-nav a{font-size:clamp(1.5rem,6vw,2rem);} /* the accordions carry the mobile layout by themselves — just drop the rail */ :root .menu-side{border-left:0; border-top:1px solid var(--line); padding-left:0;} :root .cards, :root .posts, :root .tiers, :root .quotes-3, :root .addons{grid-template-columns:repeat(2,1fr);} :root .chapters{grid-template-columns:repeat(2,1fr);} :root .gal-3{grid-template-columns:repeat(2,1fr);} :root .foot-grid{grid-template-columns:1fr 1fr;} :root .foot-brand{grid-column:1 / -1;} :root .sticky-split{grid-template-columns:1fr;} :root .sticky-split .hold{position:static;} :root .post-feature{grid-template-columns:1fr;} } @media (max-width:760px){ :root{--nav-h:64px;} :root .hero{height:92svh; min-height:520px;} :root .hero > img{object-position:50% 36%;} :root .hero .overlay{padding-bottom:34vh;} :root .split, :root .split.wide-media, :root .split.wide-text{grid-template-columns:1fr;} :root .split .txt{text-align:center;} :root .split .txt .measure, :root .split .txt .measure-sm{margin-left:auto; margin-right:auto;} :root .split .eyebrow-line{justify-content:center;} :root .media-first .txt, :root .media-first .fig-col{order:initial;} :root .split .fig-col{margin-bottom:2rem;} :root .split.text-first .fig-col{margin-bottom:0; margin-top:2rem;} :root .cards, :root .posts, :root .tiers, :root .quotes-3, :root .addons, :root .chapters{grid-template-columns:1fr;} :root .cards, :root .posts, :root .tiers{max-width:440px; margin-left:auto; margin-right:auto;} :root .gal-3, :root .gal-2{grid-template-columns:1fr; } /* one image per row on phones — biggest possible photo, still perfectly symmetric */ :root .mosaic{grid-template-columns:1fr;} :root .mosaic .band{aspect-ratio:3/2;} :root .pair{gap:.6rem;} :root .ilist .row{grid-template-columns:auto 1fr; } :root .ilist .row .go{grid-column:2; justify-self:start; margin-top:.6rem;} :root .form .grid-2{grid-template-columns:1fr;} :root .igstrip{grid-template-columns:repeat(3,1fr);} :root .foot-grid{grid-template-columns:1fr; text-align:center; justify-items:center;} :root .foot-col ul{align-items:center;} :root .foot-brand p{margin-left:auto; margin-right:auto;} :root .foot-bottom{justify-content:center; text-align:center;} :root .tlink{justify-content:center;} :root .split .txt .tlink, :root .split .txt .btn{margin-left:auto; margin-right:auto;} :root .phero .plate{margin-top:-2rem; padding:1.8rem 1.4rem 1.4rem;} :root .lbox .lb-prev{left:0;} :root .lbox .lb-next{right:0;} } @media (max-width:420px){ :root .hero .wordmark{font-size:2.1rem; letter-spacing:.1em;} :root .hero .subtitle{letter-spacing:.32em;} } /* ========================================================= BLOCK BRIDGE Everything above this line is the original design system. Core blocks wrap their content in elements the design was not drawn for —

around images,
around links,