/* ============================================================
   CakeHub Toronto — Quiet Luxury Editorial
   No single gold passes AA on both grounds, hence two accent
   tokens. --ink-muted loses its headroom on --ground-alt, hence
   --ink-muted-alt. Both were caught by measurement, not by eye.
   ============================================================ */

/* ------------------------------------------------------------
   Self-hosted fonts. Previously three render-blocking requests to
   fonts.googleapis.com on all fifteen pages — a DNS lookup and a TLS
   handshake to two origins before a single glyph could be fetched.
   Now same-origin. GA4's gtag.js is still an external request, but it
   is async and blocks nothing, so this leaves the critical path
   entirely first-party.

   Only latin and latin-ext are shipped — the Google CSS also serves
   cyrillic, cyrillic-ext and vietnamese, which nothing here sets.
   The unicode-range on each face means a browser rendering English
   fetches the latin file alone and never touches latin-ext.

   Cormorant Garamond upright is one variable file across the weight
   axis: Google serves byte-identical woff2 for 400 and 600 (verified
   by checksum), so it is declared once with a 400-600 range rather
   than downloaded twice. Italic is only ever used at 400 here.

   Files are content-stable — a given face never changes under its
   name — so /fonts/* is cached for a year in _headers, unlike /img/*.
   ------------------------------------------------------------ */
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:normal;font-weight:400 600;font-display:swap;
  src:url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;
  src:url('/fonts/cormorant-garamond-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/montserrat-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/montserrat-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --ground:#FAF7F1;
  --ground-alt:#F3EDE3;
  --ink:#1C1815;
  --ink-secondary:#5A5248;
  --ink-muted:#6F6659;
  --ink-muted-alt:#6B6355;
  --ink-hover:#332C26;
  --accent-on-light:#8A6C1E;
  --accent-on-dark:#C4A04A;
  --rule:#E4DCCD;
  --rule-soft:#CFC5B3;
  --frame:#EFE8DD;

  --on-ink:#F2ECE2;
  --on-ink-secondary:#D6CBBC;
  --on-ink-muted:#A79C8D;
  --field-rule:#6E6558;
  --field-placeholder:#8D8375;
  --in-flight:#8D8375;
  --utility-bar:#CFC7B8;

  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* Major spacing belongs in exactly one place: before the closing CTA.
     Not after the hero — the facts row is already the decompression band
     there, and a 192px pause on top of a thin strip reads as a hole. */
  --pad:20px;
  --space-major:112px;
  --space-section:80px;
  --space-tight:56px;

  --motion:180ms ease-out;
  --motion-panel:200ms ease-out;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
h1,h2,h3,p,figure,blockquote,ul{margin:0}
ul{padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0}
a{color:inherit;text-decoration:none}

/* Two rings, one per ground. Gold fails as a ring on both — it is a type
   colour, not a UI colour. Never removed. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.on-ink a:focus-visible,.on-ink button:focus-visible,.on-ink input:focus-visible,
.on-ink select:focus-visible,.on-ink textarea:focus-visible{
  outline-color:var(--on-ink);
}
.on-ink input:focus-visible,.on-ink select:focus-visible,.on-ink textarea:focus-visible{
  outline-offset:6px;
}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:var(--pad);top:-100px;z-index:100;
  background:var(--ink);color:var(--ground);padding:14px 22px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{top:12px}
.wrap{padding-left:var(--pad);padding-right:var(--pad)}
.on-ink{background:var(--ink);color:var(--on-ink)}
[hidden]{display:none !important}

/* ---- type roles ---- */
.eyebrow{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent-on-light);font-weight:400;
}
.label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--ink-muted);
}
.h-section{
  font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;
  color:var(--ink);
}
.lede{font-size:14.5px;line-height:1.7;color:var(--ink-secondary)}
/* Prices set in the display serif at body size. Never a badge. */
.price{font-family:var(--serif);font-weight:400;font-size:16px;color:var(--ink)}

/* Two buttons only. No radius, no lift, no scale, no shadow. */
.btn{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;background:var(--ink);color:var(--ground);
  padding:17px 30px;cursor:pointer;text-align:center;
  transition:background var(--motion),color var(--motion);
}
.btn:hover{background:var(--ink-hover)}
.btn-on-ink{background:var(--on-ink);color:var(--ink)}
.btn-on-ink:hover{background:#fff}
/* One in-flight treatment, and it stays legible — "Sending…" is a status,
   not an inert control. */
.btn[data-state="sending"],.btn[data-state="sending"]:hover{
  background:var(--in-flight);color:var(--ink);cursor:default;
}
.link-rule{
  display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:400;color:var(--ink);border-bottom:1px solid var(--ink);
  padding-bottom:4px;cursor:pointer;
  transition:color var(--motion),border-color var(--motion);
}
.link-rule:hover{color:var(--accent-on-light);border-color:var(--accent-on-light)}
.on-ink .link-rule{color:var(--on-ink);border-color:var(--field-placeholder)}
.on-ink .link-rule:hover{color:var(--accent-on-dark);border-color:var(--accent-on-dark)}

/* ============================================================
   Utility bar + navigation
   ============================================================ */
.utility{
  background:var(--ink);color:var(--utility-bar);
  font-size:10px;letter-spacing:.08em;text-align:center;padding:9px var(--pad);
}
.utility .utility-split{display:none}

.site-header{
  position:sticky;top:0;z-index:40;background:var(--ground);
  display:flex;justify-content:space-between;align-items:center;
  padding:18px var(--pad);
  border-bottom:1px solid transparent;
  transition:border-color var(--motion);
}
/* On scroll the hairline appears and nothing else. */
.site-header[data-scrolled="true"]{border-bottom-color:var(--rule)}

.wordmark{display:block;line-height:1}
.wordmark b{
  display:block;font-family:var(--serif);font-weight:600;font-size:22px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.wordmark i{
  display:block;font-style:normal;font-size:9.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent-on-light);
  margin-top:6px;text-align:center;text-indent:.22em;
}
.on-ink .wordmark b{color:var(--on-ink)}
.on-ink .wordmark i{color:var(--accent-on-dark)}

.nav-desktop,.header-cta{display:none}
.menu-toggle{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
  gap:5px;width:44px;height:44px;cursor:pointer;
}
.menu-toggle span{display:block;width:22px;height:1px;background:var(--ink)}

/* Full-screen overlay. Six links in display serif, CTA pinned to the foot. */
.menu-overlay{
  position:fixed;inset:0;z-index:60;
  padding:18px var(--pad) 40px;
  display:flex;flex-direction:column;
  visibility:hidden;opacity:0;
  transition:opacity var(--motion),visibility var(--motion);
}
.menu-overlay[data-open="true"]{visibility:visible;opacity:1}
.menu-head{display:flex;justify-content:space-between;align-items:center}
.menu-close{
  width:44px;height:44px;font-size:28px;line-height:1;color:var(--on-ink);
  cursor:pointer;text-align:right;
}
.menu-list{display:flex;flex-direction:column;gap:26px;margin:auto 0}
.menu-list a{
  font-family:var(--serif);font-weight:400;font-size:31px;line-height:1.1;
  color:var(--on-ink);transition:color var(--motion);
}
.menu-list a:hover{color:var(--accent-on-dark)}
.menu-foot{display:flex;flex-direction:column;gap:18px}
.menu-foot .btn{display:block;padding:18px}
.menu-foot span{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-ink-muted);text-align:center;
}

/* ============================================================
   Hero
   ============================================================ */
.hero-img{display:block;width:100%;height:auto;aspect-ratio:520/390;object-fit:cover}
.hero-copy{padding:40px var(--pad) 44px}
.hero-copy .eyebrow{display:block;margin-bottom:20px}
.hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(40px,5vw,72px);line-height:1.04;letter-spacing:-.015em;
  margin:0 0 20px;
}
.hero h1 em{font-style:italic}
.hero p{font-size:15px;line-height:1.7;color:var(--ink-secondary);margin:0 0 28px;max-width:40ch}
.hero-actions{display:flex;flex-direction:column;gap:20px}
.hero-actions .btn{padding:18px;display:block}
.hero-actions .link-rule{align-self:center}

/* ============================================================
   Facts row — every figure here is true or it is not here
   ============================================================ */
.facts{border-top:1px solid var(--rule)}
.fact{
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:24px var(--pad);border-bottom:1px solid var(--rule);
}
.fact-figure{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--ink)}
.fact .label{font-size:10.5px;text-align:right}
.fact a.label{border-bottom:1px solid var(--rule-soft);padding-bottom:3px}
.fact a.label:hover{color:var(--accent-on-light);border-color:var(--accent-on-light)}

/* ============================================================
   What I make
   ============================================================ */
.commissions{padding-block:var(--space-section) var(--space-tight)}
.commissions .h-section{margin-bottom:14px}
.commissions .lede{margin:0 0 36px}
.cards{display:flex;flex-direction:column;gap:44px}
.card-frame{
  aspect-ratio:3/4;background:var(--frame);overflow:hidden;
  outline:1px solid var(--rule);outline-offset:-8px;margin-bottom:20px;
}
.card-frame img{display:block;width:100%;height:100%;object-fit:cover}
/* The two marked slots are load-bearing, not placeholders to fill in. */
.card-empty{
  box-sizing:border-box;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:32px;background:var(--ground-alt);
  font-size:13px;line-height:1.7;color:var(--ink-muted-alt);
}
.card{display:flex}
.card > a{display:flex;flex-direction:column;flex:1}
.card h3{
  font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.2;
  color:var(--ink);margin:0 0 10px;transition:color var(--motion);
}
.card > a:hover h3{color:var(--accent-on-light)}
.card p{font-size:14.5px;line-height:1.7;color:var(--ink-secondary);margin:0 0 14px}
.card--noimage{display:none}
.commissions-more{margin-top:40px}
.pricing-note{display:none}

/* ============================================================
   Niloo — holds on typography, no photograph, deliberately
   ============================================================ */
.founder{padding:76px var(--pad) 72px}
.founder h2{font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.08;margin:0 0 30px}
.founder h2 em{font-style:italic}
.founder p{font-size:15px;line-height:1.8;color:var(--on-ink-secondary);margin:0 0 18px;max-width:46ch}
.founder p:last-of-type{margin-bottom:30px}
/* A signature, not a byline. */
.signature{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px;color:var(--on-ink)}

/* ============================================================
   Recent work
   ============================================================ */
.work{padding-block:var(--space-tight)}
.work-head{margin-bottom:26px}
.work-filters{display:none}
.work-rail{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  margin:0 calc(var(--pad) * -1);padding:0 var(--pad);
}
.work-rail::-webkit-scrollbar{display:none}
.work-item{flex:0 0 250px;scroll-snap-align:start}
/* height:auto is required — the height attribute is a presentational hint,
   and aspect-ratio is ignored unless height resolves to auto. */
.work-item img{
  display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
  background:var(--frame);
}
/* min-height so a longer name can never shift one price off the baseline. */
.work-caption{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  min-height:32px;margin-top:12px;
  font-size:10px;line-height:1.5;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-muted);
}
.work-caption .price{font-size:14px;letter-spacing:0;text-transform:none;flex:0 0 auto}
.work-rail-end{flex:0 0 var(--pad)}
.rail-hint{margin-top:20px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.work-more{display:none}

/* ============================================================
   How it works
   ============================================================ */
.process{padding-block:0 var(--space-tight)}
.process-grid{display:grid;gap:36px;border-top:1px solid var(--rule);padding-top:40px}
.step-n{font-family:var(--serif);font-weight:400;font-size:38px;line-height:.7;color:var(--accent-on-light)}
.step h3{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--ink);margin:26px 0 12px}
.step p{font-size:14.5px;line-height:1.7;color:var(--ink-secondary);margin:0}

/* ============================================================
   The review — no card, no box, no stars, no avatar
   ============================================================ */
.reviews{padding-block:16px var(--space-section)}
.reviews blockquote p{
  font-family:var(--serif);font-weight:400;font-size:27px;line-height:1.4;
  color:var(--ink);margin:0 0 22px;max-width:880px;
}
.reviews cite{
  display:block;font-style:normal;font-family:var(--sans);font-weight:400;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);margin-bottom:26px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{padding-block:var(--space-tight)}
.faq .h-section{margin-bottom:32px}
.faq-list{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item h3{font:inherit;margin:0}
.faq-q{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  width:100%;padding:22px 0;cursor:pointer;text-align:left;
}
.faq-q > span:first-child{
  font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.3;color:var(--ink);
  transition:color var(--motion);
}
.faq-q:hover > span:first-child{color:var(--accent-on-light)}
.faq-mark{font-size:20px;line-height:1;color:var(--accent-on-light);flex:0 0 auto}
/* 0fr → 1fr animates height without a hard-coded value. visibility keeps
   the closed answer out of the tab order and the accessibility tree. */
.faq-panel{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows var(--motion-panel),visibility var(--motion-panel);
}
.faq-item[data-open="true"] .faq-panel{grid-template-rows:1fr;visibility:visible}
.faq-a{overflow:hidden}
.faq-a > div{font-size:15px;line-height:1.75;color:var(--ink-secondary);padding:0 0 26px;max-width:62ch}
/* The left column was otherwise a void. It carries a conversion instead,
   at the moment the list has failed to answer someone. */
.faq-aside{border-top:1px solid var(--rule);margin-top:40px;padding-top:30px}
.faq-aside h3{
  font-family:var(--serif);font-weight:400;font-size:25px;line-height:1.3;
  color:var(--ink);margin:0 0 14px;
}
.faq-aside p{font-size:15px;line-height:1.75;color:var(--ink-secondary);margin:0 0 24px}

/* ============================================================
   Instagram
   ============================================================ */
.insta{padding-block:0 var(--space-major)}
.insta-head{
  border-top:1px solid var(--rule);padding-top:40px;margin-bottom:24px;
  display:flex;flex-direction:column;gap:14px;align-items:flex-start;
}
.insta-head h2{font-family:var(--serif);font-weight:400;font-size:27px;color:var(--ink)}
.insta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:860px}
.insta-grid img{
  display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;
  object-position:center 35%;background:var(--frame);
}

/* ============================================================
   Closing CTA — hairline inputs directly on the dark field.
   No white card, no rounded container, no shadow.
   ============================================================ */
.enquiry{padding:var(--space-section) var(--pad)}
.enquiry h2{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.06;margin:0 0 20px}
.enquiry h2 em{font-style:italic}
.enquiry-intro{font-size:15px;line-height:1.75;color:var(--on-ink-secondary);margin:0 0 10px;max-width:42ch}
.enquiry-alt{font-size:14px;line-height:1.8;color:var(--on-ink-muted);margin:0 0 32px;max-width:42ch}
.field{display:block;margin-bottom:26px}
.field > span:first-child{
  display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-ink-muted);margin-bottom:10px;
}
/* The one required qualifier, marked. */
.field--qualifier > span:first-child{color:var(--accent-on-dark)}
.field input,.field select,.field textarea{
  display:block;width:100%;background:transparent;color:var(--on-ink);
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.5;
  border:0;border-bottom:1px solid var(--field-rule);border-radius:0;
  padding:0 0 12px;transition:border-color var(--motion);
}
.field textarea{resize:vertical;min-height:76px}
.field select{
  border-bottom-color:var(--on-ink);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--on-ink-muted) 50%),
                   linear-gradient(135deg,var(--on-ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% - 5px),calc(100% - 4px) calc(50% - 5px);
  background-size:5px 5px;background-repeat:no-repeat;
}
.field select option{background:var(--ink);color:var(--on-ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--field-placeholder);opacity:1}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--on-ink)}
/* Errors inline, in words, in gold. There is no red anywhere on this site. */
.field[data-invalid="true"] input,.field[data-invalid="true"] textarea{border-bottom-color:var(--accent-on-dark)}
.field-error{
  display:block;margin-top:8px;font-size:13px;line-height:1.6;color:var(--accent-on-dark);
}
.field-error:empty{display:none}
.upload{
  display:block;border:1px dashed var(--field-rule);padding:24px;text-align:center;
  font-size:14px;color:var(--on-ink-muted);margin-bottom:34px;cursor:pointer;
  transition:border-color var(--motion),color var(--motion);
}
.upload:hover,.upload:focus-within{border-color:var(--on-ink-muted);color:var(--on-ink)}
.upload input{position:absolute;width:1px;height:1px;opacity:0}
.enquiry-actions{display:flex;flex-direction:column;gap:20px}
.enquiry-actions .btn{padding:18px;display:block;width:100%}
.enquiry-actions .link-rule{align-self:center}
.form-note{margin-top:20px;font-size:13px;line-height:1.7;color:var(--accent-on-dark)}
.form-note:empty{display:none}
/* Drawn on ivory, not on the ink field — the dark selling field gives way
   to a calm confirmation. Per the states comp, which puts the form on ink
   and this panel on ground. */
.form-success{background:var(--ground);color:var(--ink);padding:40px 24px}
.form-success p{
  font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;
  color:var(--ink);margin:0 0 20px;max-width:20ch;
}
.form-success .sans{
  font-family:var(--sans);font-weight:400;font-size:15px;line-height:1.8;
  color:var(--ink-secondary);max-width:52ch;margin-bottom:14px;
}
.form-success .signature{
  font-family:var(--serif);font-style:italic;font-size:26px;color:var(--ink);
  margin-top:26px;max-width:none;
}
.form-success:focus{outline:none}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  padding:36px var(--pad);border-top:1px solid var(--rule);
  font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);
}
.footer-brand{display:none}
.footer-nav{display:flex;flex-direction:column;gap:10px}
.footer-nav a{transition:color var(--motion)}
.footer-nav a:hover{color:var(--accent-on-light)}
.footer-fa{text-transform:none;letter-spacing:0;font-size:13.5px}

/* ============================================================
   ≥ 640 — tablet
   ============================================================ */
@media (min-width:640px){
  :root{--pad:40px;--space-major:128px;--space-section:96px;--space-tight:64px}
  body{font-size:15.5px}

  .utility{
    display:flex;justify-content:space-between;text-align:left;
    font-size:11px;letter-spacing:.1em;padding:11px var(--pad);
  }
  .utility .utility-short{display:none}
  .utility .utility-split{display:inline}

  .hero-copy{padding:64px var(--pad) 72px;max-width:680px}
  .hero-actions{flex-direction:row;align-items:center;gap:28px}
  .hero-actions .btn{display:inline-block;padding:17px 30px}
  .hero-actions .link-rule{align-self:auto}


  .h-section{font-size:40px}
  .commissions .lede{max-width:56ch}
  /* The wedding feature stays a feature at this tier — full row above the
     three-up, at its own 3:4, never one of four equal cards. */
  .cards{display:grid;grid-template-columns:1fr;gap:56px}
  .card--feature{max-width:480px}
  .card--feature h3{font-size:33px}
  .card--feature p{font-size:15.5px}
  .card--feature .price{font-size:18px}
  .cards-rest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch}
  .cards-rest .card h3{font-size:20px;min-height:48px}
  .cards-rest .card p{font-size:13.5px}
  .cards-rest .card .price{margin-top:auto;padding-top:4px}
  .card--noimage{display:flex}
  .commissions-more{display:none}
  .pricing-note{
    display:block;border-top:1px solid var(--rule);margin-top:40px;padding-top:24px;
    font-size:14.5px;line-height:1.7;color:var(--ink-secondary);max-width:62ch;
  }

  .founder{padding:112px var(--pad) 104px}
  .founder h2{font-size:52px}
  .founder p{font-size:16.5px}
  .signature{font-size:30px}

  .work-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:40px}
  .work-filters{display:flex;gap:26px}
  .work-rail{
    display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
    overflow:visible;margin:0;padding:0;
  }
  .work-item{flex:none}
  .work-caption{font-size:10.5px;margin-top:14px}
  .work-caption .price{font-size:15px}
  .work-rail-end,.rail-hint{display:none}
  .work-more{display:inline-block;margin-top:44px}

  .process-grid{grid-template-columns:1fr 1fr;gap:48px;padding-top:48px}

  .reviews{padding-block:24px var(--space-tight)}
  .reviews blockquote p{font-size:32px;margin-bottom:30px}

  .faq-q{padding:26px 0}
  .faq-q > span:first-child{font-size:23px}
  .faq-aside{max-width:44ch}

  .insta-head{
    flex-direction:row;justify-content:space-between;align-items:baseline;
    padding-top:56px;margin-bottom:32px;
  }
  .insta-head h2{font-size:32px}
  .insta-grid{gap:16px}

  .enquiry h2{font-size:44px}
  .enquiry-intro{font-size:16.5px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 36px}
  .field--wide{grid-column:1/-1}
  .enquiry-actions{flex-direction:row;align-items:center;gap:28px}
  .enquiry-actions .btn{display:inline-block;padding:17px 32px;width:auto}
  .enquiry-actions .link-rule{align-self:auto}

  .site-footer{
    display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:40px;
    padding:56px var(--pad);text-transform:none;letter-spacing:0;
  }
  .footer-brand{display:block}
  .footer-brand .wordmark-print{
    font-family:var(--serif);font-weight:400;font-size:22px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink);margin-bottom:16px;
  }
  .footer-brand p{font-size:13.5px;line-height:1.7;color:var(--ink-secondary)}
  .footer-brand .footer-fa{color:var(--ink-muted);margin-top:14px}
  .footer-nav{gap:11px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase}
}

/* ============================================================
   ≥ 900 — the text-only two-column sections
   ============================================================ */
@media (min-width:900px){
  :root{--pad:48px}
  /* Three facts, three columns. The row stayed stacked below this because
     three items in a two-column grid leaves an orphan cell. */
  .facts{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--rule)}
  .fact{
    flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:10px;
    padding:32px var(--pad);border-bottom:0;border-right:1px solid var(--rule);
  }
  .fact:last-child{border-right:0}
  .fact .label{text-align:left}
  .fact-figure{font-size:36px}

  .founder-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:start}
  .founder h2{margin:0}
  .founder-body{padding-top:12px}
  .faq{display:grid;grid-template-columns:.85fr 1.4fr;gap:64px}
  .faq-aside{margin-top:0}
  .enquiry-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px}
  .process-grid{grid-template-columns:repeat(4,1fr)}
  .site-footer{grid-template-columns:1.2fr 1fr 1fr 1fr;gap:48px}
}

/* ============================================================
   ≥ 1280 — the pinned hero panel. Two columns only once there is
   room for a 754px panel and a headline beside it: at 1200 the
   copy column would be 310px wide.
   ============================================================ */
@media (min-width:1280px){
  :root{--pad:64px;--space-major:192px;--space-section:128px;--space-tight:88px}

  .site-header{padding:26px var(--pad);border-bottom:1px solid var(--rule)}
  .wordmark b{font-size:29px}
  .wordmark i{font-size:10.5px;margin-top:8px}
  .nav-desktop{
    display:flex;gap:32px;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--ink);
  }
  .nav-desktop a{transition:color var(--motion);border-bottom:1px solid transparent;padding-bottom:3px}
  .nav-desktop a:hover{color:var(--accent-on-light);border-bottom-color:var(--accent-on-light)}
  .header-cta{
    display:inline-block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    background:var(--ink);color:var(--ground);padding:14px 24px;
    transition:background var(--motion);
  }
  .header-cta:hover{background:var(--ink-hover)}
  .menu-toggle{display:none}

  .hero{display:grid;grid-template-columns:1fr 754px;align-items:stretch}
  .hero-picture{grid-column:2;grid-row:1}
  .hero-copy{
    grid-column:1;grid-row:1;max-width:none;
    padding:132px 72px 132px var(--pad);
    display:flex;flex-direction:column;justify-content:center;
  }
  .hero-copy .eyebrow{font-size:11px;margin-bottom:30px}
  .hero h1{margin-bottom:30px}
  .hero p{font-size:16.5px;margin-bottom:40px}
  /* Pinned to the export's own size, so no CSS ever reframes it. The 1x is
     754x813 and the 2x is 754x812.5, so cover trims half a pixel rather
     than letting fill stretch the composition. */
  .hero-img{width:754px;height:auto;aspect-ratio:754/813}

  /* First cell padding-left and last cell padding-right sit on the page
     gutter rather than the row's own inset. */
  .fact{padding:36px 48px}
  .fact:first-child{padding-left:var(--pad)}
  .fact:last-child{padding-right:var(--pad)}
  .fact-figure{font-size:40px}

  .commissions{padding-block:var(--space-section)}
  .commissions-head{
    display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end;margin-bottom:64px;
  }
  .commissions .h-section{margin-bottom:0}
  .commissions .lede{margin:0;font-size:15.5px}
  .cards{grid-template-columns:480px 1fr;gap:56px;align-items:stretch}
  .card--feature{max-width:none}
  .card--feature .card-frame{aspect-ratio:auto;height:640px;outline-offset:-9px;margin-bottom:26px}
  /* The wrapper is a flex column and the footnote takes margin-top:auto, so
     the two blocks end on the same line instead of leaving a hole. */
  .cards-rest{display:flex;flex-direction:column;height:100%}
  .cards-rest-grid{align-items:start}
  .cards-rest .card-frame{aspect-ratio:auto;height:316px;outline-offset:-9px;margin-bottom:26px}
  .cards-rest .card h3{font-size:25px;min-height:60px;margin-bottom:12px}
  .cards-rest .card p{font-size:14.5px;min-height:100px;margin-bottom:18px}
  .cards-rest .card .price{margin-top:0;padding-top:0}
  .pricing-note{margin-top:auto;padding-top:24px}

  .founder{padding:152px var(--pad) 144px}
  .founder-grid{gap:96px}
  .founder h2{font-size:64px;line-height:1.06;letter-spacing:-.01em}
  .founder p{font-size:17px;line-height:1.85;margin-bottom:22px}
  .founder p:last-of-type{margin-bottom:48px}
  .signature{font-size:32px}

  .work{padding-block:var(--space-section) 40px}
  .work-head{margin-bottom:44px}
  .work-item img{aspect-ratio:auto;height:561px;outline:1px solid var(--rule);outline-offset:-9px}
  .work-more{margin-top:48px}

  .process-grid{gap:56px}

  .reviews{padding-block:72px var(--space-tight)}
  .reviews blockquote p{font-size:34px;line-height:1.35}

  .faq{gap:80px;padding-block:var(--space-tight) var(--space-section)}
  .faq .h-section{margin-bottom:44px}
  .faq-aside{max-width:36ch}
  .faq-a > div{padding-right:96px}

  .insta{padding-block:0 var(--space-major)}
  .insta-head{padding-top:64px;margin-bottom:36px}

  .enquiry-grid{gap:96px}
  .enquiry h2{font-size:52px;margin-bottom:28px}
  .enquiry-intro{line-height:1.8;margin-bottom:24px}
  .enquiry-alt{font-size:15px}
  .form-grid{gap:30px 36px}
  .field > span:first-child{font-size:10.5px;margin-bottom:12px}
  .form-success{padding:56px 48px}
  .form-success p{font-size:38px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* ============================================================
   Interior pages (/weddings, /corporate, /celebrations, …)
   Same system as the homepage; these are the few patterns the
   homepage did not need.
   ============================================================ */
.page-hero{padding-block:var(--space-section) var(--space-tight)}
.page-hero .eyebrow{display:block;margin-bottom:18px}
.page-hero h1{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(36px,5vw,64px);line-height:1.06;letter-spacing:-.015em;
  margin:0 0 24px;max-width:18ch;
}
.page-hero h1 em{font-style:italic}
.page-hero .lede{font-size:16.5px;line-height:1.8;max-width:56ch;margin:0}

/* The one fact an interior page must not bury — the lead time. */
.keyfact{
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:28px 0;margin:40px 0 0;display:flex;flex-direction:column;gap:8px;
}
.keyfact b{
  font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;color:var(--ink);
}
.keyfact span{font-size:14.5px;line-height:1.7;color:var(--ink-secondary);max-width:60ch}

.prose{padding-block:var(--space-tight)}
.prose h2{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;margin:0 0 20px}
.prose p{font-size:15.5px;line-height:1.8;color:var(--ink-secondary);margin:0 0 20px;max-width:62ch}
.prose p:last-child{margin-bottom:0}
.prose--split{display:grid;gap:40px}

.steps{display:grid;gap:36px;border-top:1px solid var(--rule);padding-top:40px;margin-top:40px}
.steps h3{font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink);margin:22px 0 10px}
.steps p{font-size:14.5px;line-height:1.7;color:var(--ink-secondary);margin:0}

.gallery{display:grid;gap:20px;grid-template-columns:1fr}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;background:var(--frame)}
.gallery figure{margin:0}
.gallery figcaption{
  margin-top:12px;font-size:10.5px;line-height:1.5;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);
}
/* An honest gap, designed — never a borrowed photograph. */
.gallery .empty{
  aspect-ratio:3/4;background:var(--ground-alt);box-sizing:border-box;
  outline:1px solid var(--rule);outline-offset:-9px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;
  font-size:13px;line-height:1.7;color:var(--ink-muted-alt);
}

.breadcrumb{
  /* On an interior page this replaces the hero eyebrow rather than sitting
     above one — it states the category and does the wayfinding in one line. */
  margin:0 0 26px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);
}
.breadcrumb a{color:var(--ink-muted)}
.breadcrumb a:hover{color:var(--accent-on-light)}

@media (min-width:640px){
  .keyfact{flex-direction:row;align-items:baseline;gap:28px}
  .keyfact b{flex:0 0 auto}
  .steps{grid-template-columns:1fr 1fr;gap:40px}
  .gallery{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .prose--split{grid-template-columns:1fr 1fr;gap:64px}
  .steps{grid-template-columns:repeat(4,1fr);gap:40px}
}
@media (min-width:1280px){
  .page-hero{padding-block:var(--space-section) var(--space-tight)}
  .page-hero .lede{font-size:17px}
  .steps{gap:56px}
}

/* ============================================================
   BLOG
   Added 2026-10-24. Deliberately thin: an article is .prose with
   a few more element types, not a new page design. Everything
   here either extends .prose or lays out the index.
   ============================================================ */

/* .prose was written for two or three paragraphs on a service page.
   An article runs long enough to need a second heading level, lists
   and inline links, so those are defined once, here. */
.prose h3{
  font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;
  color:var(--ink);margin:40px 0 14px;
}
.prose h2{margin-top:52px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul{margin:0 0 20px;padding-left:20px;max-width:62ch}
.prose li{
  font-size:15.5px;line-height:1.8;color:var(--ink-secondary);
  margin-bottom:10px;padding-left:4px;
}
.prose li::marker{color:var(--rule-soft)}
.prose strong{font-weight:500;color:var(--ink)}
.prose p a,.prose li a{
  color:var(--ink);border-bottom:1px solid var(--rule-soft);
  transition:color var(--motion),border-color var(--motion);
}
.prose p a:hover,.prose li a:hover{color:var(--accent-on-light);border-color:var(--accent-on-light)}

/* The one pulled-out line per article. A rule and a size change, no tint
   block and no quotation marks — the page has no other panels. */
.prose blockquote{
  margin:36px 0;padding:0 0 0 24px;border-left:1px solid var(--rule-soft);max-width:58ch;
}
.prose blockquote p{
  font-family:var(--serif);font-size:23px;line-height:1.45;color:var(--ink);margin:0;
}

/* Date and reading time, under the article title. Same treatment as the
   breadcrumb so the two read as one band of metadata. */
.post-meta{
  margin:0 0 26px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-muted);
}
.post-meta time{color:var(--ink-muted)}

/* Closing line of an article, before the enquiry section. */
.post-end{
  border-top:1px solid var(--rule);margin-top:48px;padding-top:32px;
}
.post-end p{font-size:15.5px;line-height:1.8;color:var(--ink-secondary);max-width:62ch;margin:0 0 22px}

/* ---- the index ---- */
.post-list{padding-block:var(--space-tight);display:grid;gap:0}
.post-list article{border-top:1px solid var(--rule);padding:36px 0}
.post-list article:last-child{border-bottom:1px solid var(--rule)}
.post-list h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.4vw,34px);
  line-height:1.15;margin:10px 0 14px;max-width:26ch;
}
.post-list h2 a{color:var(--ink);transition:color var(--motion)}
.post-list h2 a:hover{color:var(--accent-on-light)}
.post-list p{font-size:15px;line-height:1.8;color:var(--ink-secondary);margin:0 0 18px;max-width:60ch}
.post-list .post-meta{margin:0}

@media (min-width:900px){
  .prose--article{max-width:none}
  .post-list article{
    display:grid;grid-template-columns:200px 1fr;gap:40px;align-items:start;
  }
  .post-list h2{margin-top:0}
}

/* Lead image on a journal article. Editorial, never portfolio: these are
   licensed photographs, not Niloo's work, and the caption says so. No cake
   appears in any of them for exactly that reason — a cake here would read
   as hers, which is the claim /work makes and this must not.
   `height:auto` is required: the width/height attributes would otherwise
   defeat aspect-ratio (trap 1 in the spec). */
.post-figure{margin:0;padding-block:0 var(--space-tight)}
.post-figure img{
  display:block;width:100%;height:auto;aspect-ratio:3/2;
  object-fit:cover;background:var(--frame);
}
.post-figure figcaption{
  margin-top:12px;font-size:10.5px;line-height:1.5;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-muted);
}