/*
  Nocturnal Editorial: site stylesheet.
  Versioned filename: Cloudflare keeps assets for 4 hours, so a changed file
  ships as site.2.css (and the <link> tags are updated), never in place.
*/

@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/assets/fonts/cormorant-garamond-italic.woff2) format("woff2");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(/assets/fonts/eb-garamond-italic.woff2) format("woff2");font-weight:400 800;font-style:italic;font-display:swap}

:root{
  /* surfaces */
  --night:#040403;      /* the logo's own black */
  --walnut:#1A120C;
  --leather:#2E251B;
  --shadow:#413628;     /* borders and dividers only */
  /* ink */
  --parchment:#EAD9C2;  /* headings */
  --ash:#C6C2BA;        /* body */
  --taupe:#B5A99D;      /* italic sub-lines */
  --dusk:#978672;       /* fine print; too faint on leather */
  /* metal and flame */
  --gold:#C5A078;
  --candle:#E4BB8E;
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --body:"EB Garamond",Georgia,"Times New Roman",serif;
  --header:84px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--header)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--night);color:var(--ash);font:18px/1.75 var(--body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:var(--gold);text-underline-offset:3px}
a:hover{color:var(--candle)}
:focus-visible{outline:1px solid var(--candle);outline-offset:4px}
.skip{position:absolute;left:16px;top:-60px;z-index:30;background:var(--gold);color:var(--night);padding:10px 16px;font:600 14px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}

/* The logo art sits on its own black square: fade its edges and let the page colour show through. */
.art{mix-blend-mode:lighten;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent),linear-gradient(transparent,#000 6%,#000 94%,transparent);mask-composite:intersect}

/* ---- header: fixed and dark, centred mark, links left, icon right ---- */
header{position:fixed;inset:0 0 auto;z-index:10;height:var(--header);background:var(--night);border-bottom:1px solid var(--shadow);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 28px}
.brand{grid-column:2;grid-row:1;display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:58px}
/* the header owl carries its own glints (same stars as the home logo, re-measured for the crop) */
.mark{position:relative;display:inline-block;line-height:0}
.brand b{display:block;font:500 25px/1 var(--display);letter-spacing:.06em;color:var(--parchment)}
.brand small{display:block;font:500 11px/1 var(--display);letter-spacing:.55em;color:var(--gold);margin-top:6px}
.icons{grid-column:3;grid-row:1;justify-self:end;display:flex;gap:10px}
.icons a{width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 1px var(--gold) inset;display:grid;place-items:center;color:var(--gold);transition:.2s}
.icons a:hover{background:var(--gold);color:var(--night)}
.icons svg{width:18px;height:18px}
.links{grid-column:1;grid-row:1;display:flex;gap:30px}
.links a{font:500 13px/1 var(--display);letter-spacing:.26em;text-transform:uppercase;color:var(--ash);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;transition:.2s}
.links a:hover,.links a[aria-current="page"]{color:var(--candle);border-bottom-color:var(--gold)}

/* burger: three thin gold lines that cross into an X */
.burger{display:none;grid-column:1;grid-row:1;width:44px;height:44px;padding:0;background:none;border:0;cursor:pointer;position:relative}
.burger span{position:absolute;left:10px;right:10px;height:1px;background:var(--gold);transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:22px}.burger span:nth-child(3){top:29px}
body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* the phone menu: a contents page */
.menu{position:fixed;inset:var(--header) 0 0;z-index:9;background:var(--night);padding:48px 28px 40px;text-align:center;overflow-y:auto;visibility:hidden;opacity:0;transition:opacity .3s,visibility 0s .3s}
body.menu-open .menu{visibility:visible;opacity:1;transition:opacity .3s}
body.menu-open{overflow:hidden}
.menu .rule{margin:18px auto 30px}
.menu ol{list-style:none;margin:0 auto;padding:0;max-width:320px;text-align:left}
.menu li{border-bottom:1px solid var(--shadow)}
.menu li a{display:flex;align-items:baseline;gap:18px;padding:16px 4px;font:500 20px/1.2 var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--parchment);text-decoration:none}
.menu li a:hover,.menu li a[aria-current="page"]{color:var(--candle)}
.menu li i{width:34px;font:italic 500 20px/1 var(--display);letter-spacing:0;color:var(--gold)}
.menu .ornament{background:none;margin:34px 0 22px}
.menu .ornament span{width:80px}
.menu .italic{font-size:21px}
.menu .icons{justify-content:center;justify-self:center;margin-top:26px}

/* ---- type and rhythm ---- */
section{padding:110px 28px}
.wrap{max-width:1120px;margin:0 auto}
.narrow{max-width:760px;margin:0 auto}
/* the library picture sits behind every page (.backdrop in layout.html); sections are
   translucent tints over it so text stays readable while the room shows through */
.night{background:rgba(4,4,3,.74)}
.walnut{background:rgba(4,4,3,.68)}  /* neutral like .night: a brown tint read as a muddy slab over the picture */
.caps{font:500 15px/1.5 var(--display);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0}
h1,h2,h3{font-family:var(--display);font-weight:500;text-transform:uppercase;color:var(--parchment);margin:0}
h1{font-size:44px;line-height:1.2;letter-spacing:.16em}
h2{font-size:34px;line-height:1.3;letter-spacing:.18em}
h3{font-size:19px;line-height:1.4;letter-spacing:.2em}
.rule{width:44px;height:1px;background:var(--gold);margin:22px 0}
.center{text-align:center}
.center .rule{margin-inline:auto}
.italic{font:italic 400 25px/1.45 var(--display);color:var(--taupe);margin:0}
.aside{font:italic 400 19px/1.4 var(--display);color:var(--dusk);margin:6px 0 0}
p{margin:0 0 1em}
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.center .btns{justify-content:center}
.btn{display:inline-block;padding:14px 28px;border:0;cursor:pointer;font:600 14px/1 var(--display);letter-spacing:.24em;text-transform:uppercase;text-decoration:none;transition:.2s}
.btn.solid{background:var(--gold);color:var(--night)}
.btn.solid:hover{background:var(--candle);color:var(--night)}
.btn.line{background:none;box-shadow:0 0 0 1px var(--gold) inset;color:var(--gold)}
.btn.line:hover{background:rgba(197,160,120,.1);color:var(--candle)}
.btn[disabled]{opacity:.6;cursor:progress}

/* ornament: line, star, line, lifted from the logo */
.ornament{display:flex;align-items:center;justify-content:center;gap:16px;padding:0 28px;background:rgba(4,4,3,.74)}
.ornament span{height:1px;width:min(220px,30vw);background:linear-gradient(90deg,transparent,var(--gold))}
.ornament span:last-child{transform:scaleX(-1)}
.ornament svg{width:22px;height:22px;fill:var(--gold)}

/* gilt frame for photographs */
.frame{padding:10px;box-shadow:0 0 0 1px var(--shadow) inset;background:rgba(46,37,27,.35)}
.frame img{width:100%;height:100%;object-fit:cover}

/* ---- hero ---- */
.hero{padding-top:150px;padding-bottom:90px}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero .logo{width:100%;max-width:540px;justify-self:center}
/* the home page is the hero alone: fill the screen so the footer sits below the fold */
.hero.solo{min-height:100vh;min-height:100svh;display:flex;align-items:center}
.hero.solo .wrap{width:100%}
/* home: a still picture behind the page, the text scrolls over it. A fixed layer rather than
   background-attachment:fixed, which iPhones ignore. The veil keeps the text readable, and the
   logo's lighten blend lets the scene show through its black square. The picture AND its
   darkening veil are set on the element in home.html, so both can be changed without a new
   stylesheet: pick the veil strength to suit each picture. */
.backdrop{position:fixed;inset:0;z-index:-1;background-color:var(--night);background-position:center;background-size:cover;background-repeat:no-repeat}
/* on tall screens show more of the library (the shelves) and less of the empty panelling */
@media (max-aspect-ratio:1/1){.backdrop{background-position:28% center}}
.hero.solo{background:transparent}
/* a dark pool behind the logo, so a lamp or candle in the picture never washes it out.
   The logo blends "lighten" against this pool, not against the bright scene. */
/* The pool is a separate layer (not the element's own background) so the logo can fade on
   scroll without the pool becoming an isolated group: opacity on .pool itself would cut the
   logo's lighten blend off from the scene and show its black square. --fade (0..1) is set by
   site.2.js as the page scrolls. */
.pool{position:relative}
.pool::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(4,4,3,.92) 60%,rgba(4,4,3,.6) 82%,rgba(4,4,3,0) 100%);opacity:calc(1 - var(--fade,0))}
.pool .art{position:relative;width:100%;opacity:calc(1 - var(--fade,0) * .92);transform:translateY(calc(var(--fade,0) * -28px)) scale(calc(1 - var(--fade,0) * .05))}

/* Twinkling stars: a glint sits exactly over each star painted in the logo. ::before twinkles
   on its own now and then; ::after flares when the page scrolls (site.2.js adds .flare). */
.glint{position:absolute;left:var(--x);top:var(--y);width:var(--s);aspect-ratio:1;translate:-50% -50%;pointer-events:none;opacity:calc(1 - var(--fade,0))}
.glint::before,.glint::after{content:"";position:absolute;inset:0;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffe9c4' d='M12 0 13.1 10.9 24 12 13.1 13.1 12 24 10.9 13.1 0 12 10.9 10.9Z'/%3E%3C/svg%3E") center/100% no-repeat,radial-gradient(circle,rgba(255,238,210,.95) 0 6%,rgba(228,187,142,.4) 18%,rgba(228,187,142,0) 50%)}
.glint.dot::before,.glint.dot::after{background:radial-gradient(circle,rgba(255,240,215,1) 0 12%,rgba(228,187,142,.5) 28%,rgba(228,187,142,0) 60%)}
.glint::before{animation:twinkle var(--t,7s) var(--d,0s) infinite ease-in-out}
.glint.flare::after{animation:flare .95s ease-out}
@keyframes twinkle{0%,64%,100%{opacity:0;scale:.5;rotate:0deg}76%{opacity:.8;scale:1.05;rotate:10deg}88%{opacity:.2;scale:.8;rotate:16deg}}
@keyframes flare{0%{opacity:0;scale:.4;rotate:0deg}22%{opacity:1;scale:1.3;rotate:14deg}100%{opacity:0;scale:.75;rotate:34deg}}
@media (prefers-reduced-motion:reduce){.glint{display:none}.pool .art{transform:none}}

/* ---- inner-page heading ---- */
.pagehead+.night{padding-top:30px}
.pagehead{padding:170px 28px 70px}
.pagehead .owl{width:110px;margin:0 auto 24px}

/* ---- closing call to action ---- */
.cta .owl{width:110px;margin:0 auto 24px}
/* a finished poster (its own headline baked in): framed, centred, nothing beside it */
.poster{max-width:680px;margin:6px auto 0;aspect-ratio:1/1;box-shadow:0 0 0 1px var(--shadow) inset,0 30px 70px rgba(0,0,0,.55)}

/* ---- about ---- */
.about .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.about .frame{aspect-ratio:5/6;position:sticky;top:120px}
.about .frame img{object-position:50% 20%}
.qa+.qa{margin-top:46px}
.story .lead{font:italic 500 30px/1.35 var(--display);color:var(--parchment);margin:0 0 26px}
.story .rule{margin:30px 0}
.story .signoff{font:italic 400 23px/1.5 var(--display);color:var(--taupe);margin-top:26px}
.qa .rule{margin:16px 0 18px;width:32px}
.qa h2,.entry h2,.unsure h2{font-size:19px;letter-spacing:.2em}
.entry h3{font-size:18px}
.caps.group{text-align:center;margin:0 0 26px}
.index+.caps.group{margin-top:80px}

/* ---- services: an index of ten entries ---- */
.index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 64px}
.entry{border-top:1px solid var(--shadow);padding:34px 0 30px;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 14px}
.entry .n{font:italic 500 26px/1.2 var(--display);color:var(--gold)}
.entry h2{font-size:18px}
.enquire{display:inline-block;margin-top:16px;font:500 12px/1.4 var(--display);letter-spacing:.28em;text-transform:uppercase;text-decoration:none}
.entry .tag{font:italic 400 21px/1.4 var(--display);color:var(--taupe);margin:8px 0 12px}
.entry p{font-size:17px;margin:0}
.panel{background:var(--leather);box-shadow:0 0 0 1px var(--shadow) inset;position:relative}
.panel::before{content:"";position:absolute;inset:7px;border:1px solid rgba(197,160,120,.16);pointer-events:none}
.unsure{margin:70px auto 0;max-width:760px;padding:48px 44px}
.unsure .btns{margin-top:26px}

/* ---- feature picture ---- */
.feature .wrap{display:grid;grid-template-columns:1.25fr 1fr;gap:64px;align-items:center}
.feature .frame{aspect-ratio:1/1;box-shadow:0 0 0 1px var(--shadow) inset,0 30px 70px rgba(0,0,0,.55)}

/* ---- portfolio ---- */
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.work{padding:34px 30px 30px;display:flex;flex-direction:column;min-height:270px;text-decoration:none;transition:.25s}
.work::before{transition:.25s}
.work:hover{background:#352a1f}
.work:hover::before{border-color:rgba(197,160,120,.45)}
.work .kind{font:500 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.work .title{font:500 26px/1.25 var(--display);color:var(--parchment);margin:20px 0 10px}
.work .pub{font:italic 19px/1.4 var(--display);color:var(--taupe)}
.work .read{margin-top:auto;padding-top:22px;font:500 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe)}
.work:hover .read{color:var(--candle)}

/* ---- portfolio: case studies ---- */
.pagehead .intro{max-width:760px;margin:26px auto 0}
/* portfolio: the intro runs straight into the work, no double gap */
.pagehead:has(+.portfolio){padding-bottom:24px}
.pagehead+.portfolio{padding-top:16px}
/* contact: the form follows the title directly */
.pagehead:has(+.contact){padding-bottom:24px}
.pagehead+.contact{padding-top:28px}
.group-title{text-align:center;font-size:26px;letter-spacing:.16em;margin:56px 0 0}
.group-intro{max-width:760px;margin:16px auto 40px;font-size:21px}
.cases{display:grid;gap:24px;max-width:920px;margin:0 auto}
.case{padding:40px 44px 34px}
.case .kind{font:500 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}
.case h3{font-size:21px}
.case .rule{width:32px;margin:16px 0 20px}
.case p{font-size:17px}
.case b,.trenches b{font:500 13px/1.4 var(--display);letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-right:8px}
.case cite{font-style:italic;color:var(--parchment)}

/* ---- about: the bio ---- */
.story .hook{font:italic 500 21px var(--display);color:var(--parchment)}
.story blockquote{margin:32px 0;padding:6px 0 6px 24px;border-left:1px solid var(--gold);font:italic 400 26px/1.4 var(--display);color:var(--parchment)}
.story h2{font-size:22px;letter-spacing:.18em;margin-top:44px}
.trenches{list-style:none;padding:0;margin:8px 0 1em}
.trenches li{padding:20px 0;border-top:1px solid var(--shadow)}
.trenches li:last-child{border-bottom:1px solid var(--shadow)}
.trenches b{display:block;margin-bottom:8px}
.story .btns{margin-top:30px}
@media (max-width:860px){.case{padding:30px 22px 24px}.group-title{font-size:21px}.story blockquote{font-size:22px}}

/* ---- contact form: ink lines on walnut ---- */
.contact{padding:120px 28px}
.contact .owl{width:110px;margin:0 auto 24px}
form{max-width:760px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:30px 36px;text-align:left}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field>label,.field>.label{font:500 12px/1 var(--display);letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.field em{font:italic 15px var(--display);letter-spacing:0;text-transform:none;color:var(--dusk);margin-left:6px}
input,select,textarea{width:100%;background:transparent;border:0;border-bottom:1px solid var(--shadow);border-radius:0;color:var(--parchment);font:18px/1.5 var(--body);padding:8px 0 10px;outline:none;transition:border-color .2s}
input::placeholder,textarea::placeholder{color:#7a6c5c;font-style:italic;opacity:1}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--gold)}
select{appearance:none;cursor:pointer;padding-right:28px;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 12px) 55%,calc(100% - 6px) 55%;background-size:6px 6px;background-repeat:no-repeat}
select option{background:var(--walnut);color:var(--parchment)}
textarea{resize:vertical;min-height:150px;border:1px solid var(--shadow);padding:14px 16px}
textarea:focus{border-color:var(--gold)}
[aria-invalid="true"]{border-bottom-color:#d98c6f}
textarea[aria-invalid="true"]{border-color:#d98c6f}
.error{font:italic 16px/1.3 var(--display);color:#e0a48c;min-height:0;margin:0}
.error:empty{display:none}
.file{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.file input{position:absolute;opacity:0;width:1px;height:1px}
.file label.btn{padding:12px 22px;font-size:13px}
.file input:focus-visible+label{outline:1px solid var(--candle);outline-offset:4px}
.file span{font:italic 17px var(--display);color:var(--dusk)}
.trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.send{grid-column:1/-1;display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:6px}
.status{font:italic 18px/1.4 var(--display);color:var(--taupe);margin:0}
.status.ok{color:var(--candle)}
.status.bad{color:#e0a48c}
.consent{grid-column:1/-1;font:italic 17px/1.5 var(--display);color:var(--dusk);margin:0}

/* ---- plain pages: privacy, 404 ---- */
.page{padding:160px 28px 110px}
.page h2{font-size:22px;margin:48px 0 14px}
.page ul{padding-left:1.2em;margin:0 0 1em}
.page li{margin-bottom:.4em}
.lost{min-height:100vh;display:grid;place-items:center;padding:140px 28px 90px}
.lost .owl{width:130px;margin:0 auto 26px}

footer{background:var(--night);border-top:1px solid var(--shadow);padding:34px 28px;display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap;font:500 12px/1.8 var(--display);letter-spacing:.34em;text-transform:uppercase;color:var(--dusk)}
footer a{color:var(--gold);text-decoration:none}
footer a:hover{color:var(--candle)}
footer .icons{gap:8px}
footer .icons a{width:34px;height:34px}
footer .icons a:hover{color:var(--night)}
footer .icons svg{width:16px;height:16px}

/* ---- responsive ---- */
@media (min-width:1101px){.menu{display:none}}
@media (max-width:1100px){
  .links{display:none}
  .burger{display:block}
  header{grid-template-columns:44px 1fr 44px}
  .brand{justify-self:center}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--header:70px}
  body{font-size:17px}
  header{padding:0 16px}
  header>.icons{display:none}
  .brand img{width:44px}
  .brand b{font-size:20px}
  .brand small{font-size:9px;letter-spacing:.5em}
  section{padding:78px 20px}
  .hero{padding-top:110px}
  h1{font-size:34px;letter-spacing:.12em}
  h2{font-size:26px;letter-spacing:.14em}
  .italic{font-size:22px}
  .hero .wrap,.about .wrap,.feature .wrap{grid-template-columns:1fr;gap:44px}
  .pagehead{padding:120px 20px 50px}
  .hero .logo{max-width:340px}
  .about .frame{max-width:420px;position:static}
  .story .lead{font-size:26px}
  .story .signoff{font-size:21px}
  .index{grid-template-columns:1fr}
  .entry{grid-template-columns:40px minmax(0,1fr)}
  .unsure{padding:36px 24px}
  .shelf{grid-template-columns:1fr;gap:18px}
  .work{min-height:0}
  form{grid-template-columns:1fr;gap:26px}
  .contact{padding:90px 20px}
  .page{padding:120px 20px 80px}
  .pagehead+.contact{padding-top:24px}
}