/* ===========================================================================
   HUXLEY AND HYDE - MARKETING SITE STYLESHEET
   huxleyandhyde.com : homepage, /about/, /get-verified/, /examples/
   ---------------------------------------------------------------------------
   This is the only stylesheet these pages load. Editing this file changes
   every marketing page at once. Nothing here is generated, so it can be
   edited by hand and handed straight back.

   Structure
     1  Design tokens          every colour, typeface and rule lives here
     2  Base and layout
     3  Masthead and navigation
     4  Homepage
     5  Shared page furniture  headings, buttons, footer
     6  Get verified page      scoped under .gv
     7  Example pages          marks and certificate
     8  About page             scoped under .ab
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1  DESIGN TOKENS
   Change a value here and it changes everywhere it is used. Most of a redesign
   should be possible in this block alone.

     --ox     oxblood      headings accent, buttons, links
     --gi     gilt         secondary accent, footer rules
     --pa     parchment    page background
     --ink    near black   body text
     --bz     bronze green currently unused on the marketing pages
     --rule   hairline     section dividers and borders
     --mut    muted text   labels, captions, nav
     --serif  body face
     --disp   display face headings and the wordmark
     --mono   label face   small caps labels, buttons, nav

   The three faces load from Google Fonts in the page head. If a face is
   changed here, tell Henry so the font link is changed to match.
   --------------------------------------------------------------------------- */
:root{
  --ox:    #6E1F26;   /* oxblood      */
  --gi:    #B08A46;   /* gilt         */
  --pa:    #F3EADA;   /* parchment    */
  --ink:   #17120F;   /* ink          */
  --bz:    #2F4238;   /* bronze green */
  --rule:  #DCD0BB;   /* hairline     */
  --mut:   #6B5C4C;   /* muted text   */

  --serif: 'EB Garamond', Georgia, serif;
  --disp:  'Cinzel', Georgia, serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}
*{box-sizing:border-box;} html{scroll-behavior:smooth;}
body{margin:0;background:var(--pa);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.55;}
.wrap{max-width:1000px;margin:0 auto;padding:0 30px;}
.narrow{max-width:760px;}

/* top bar */
.top{border-bottom:1px solid var(--rule);}
.topin{display:flex;align-items:center;gap:12px;padding:18px 0;}
.top .nm{font-family:var(--disp);font-size:17px;letter-spacing:2.4px;}
.top nav{margin-left:auto;display:flex;gap:26px;font-family:var(--mono);font-size:10px;letter-spacing:1.4px;color:var(--mut);}
.top nav a{color:var(--mut);text-decoration:none;} .top nav a:hover{color:var(--ox);}

/* hero */
.hero{padding:78px 0 62px;}
h1{font-family:var(--disp);font-size:52px;font-weight:400;line-height:1.12;margin:0;max-width:15ch;}
.stand{font-size:20px;color:#413A31;margin:26px 0 0;max-width:62ch;}
.stand .beat{font-family:var(--disp);font-size:22px;color:var(--ox);display:block;margin:16px 0;letter-spacing:.5px;}
.stand .last{font-family:var(--disp);font-size:24px;color:var(--ink);display:block;margin-top:18px;}
.cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
.btn{font-family:var(--mono);font-size:11px;letter-spacing:1.8px;text-decoration:none;padding:15px 24px;
 border:1.5px solid var(--ox);color:var(--ox);display:inline-block;}
.btn.fill{background:var(--ox);color:var(--pa);}
.btn:hover{background:#EFE4D2;} .btn.fill:hover{background:#5A181F;color:var(--pa);}

/* sections */
section{padding:56px 0;border-top:1px solid var(--rule);}
section.dark{background:#17120F;color:#E7DDC9;border-top:0;}
section.dark h2{color:var(--pa);} section.dark p{color:#CDBFA8;}
h2{font-family:var(--disp);font-size:31px;font-weight:400;margin:0 0 20px;line-height:1.2;}
h3{font-family:var(--disp);font-size:20px;font-weight:600;margin:0 0 4px;letter-spacing:.2px;}
p{margin:0 0 17px;color:#3B342C;max-width:66ch;}
.kick{font-family:var(--mono);font-size:10px;letter-spacing:1.9px;color:var(--ox);font-weight:600;margin-bottom:12px;}
section.dark .kick{color:#B08A46;}

/* mechanism strip */
.mech{display:flex;gap:0;flex-wrap:wrap;margin:26px 0 0;border:1px solid var(--rule);background:#F8F1E3;}
.mech div{flex:1;min-width:210px;padding:20px 22px;border-right:1px solid var(--rule);}
.mech div:last-child{border-right:0;}
.mech b{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;color:var(--ox);margin-bottom:7px;}
.mech p{margin:0;font-size:16.5px;}

/* examples */
.ex{border-left:2px solid var(--gi);padding:4px 0 4px 20px;margin:0 0 22px;max-width:70ch;}
.ex .say{font-family:var(--disp);font-size:19px;color:var(--ox);margin-bottom:5px;}
.ex p{margin:0;font-size:17px;}

/* list of things */
.things{font-family:var(--serif);font-size:18.5px;color:#4A4239;column-count:2;column-gap:34px;margin:22px 0 0;max-width:none;}
.things span{display:block;padding:3px 0;break-inside:avoid;}

/* marks row */
.marks{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 8px;}
.mk svg{display:block;}
.mknote{font-family:var(--mono);font-size:9.5px;letter-spacing:1.1px;color:var(--mut);}

/* get grid */
.get{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;margin-top:26px;}
.get p{font-size:16.5px;margin:0;}

/* asks */
.ask p{max-width:68ch;}
.ask .lead{font-family:var(--disp);font-size:20px;color:var(--ox);}

/* closing */
.close{text-align:center;padding:70px 0 76px;}
.close h2{margin-bottom:10px;}
.close p{margin:0 auto 28px;}
.close .cta{justify-content:center;}

/* footer */
footer{background:#17120F;color:#B9A98F;padding:34px 0 44px;font-size:15px;}
.fin{display:flex;gap:34px;flex-wrap:wrap;align-items:flex-start;}
footer b{display:block;font-family:var(--disp);font-size:13px;letter-spacing:1.7px;color:#B08A46;font-weight:600;margin-bottom:5px;}
.f2{margin-left:auto;text-align:right;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;line-height:2;}
.f2 a{color:#B9A98F;text-decoration:none;}
.fc a{color:#E7DDC9;text-decoration:none;}
.fc a:hover{color:#B08A46;}
a[href^='tel:']{text-decoration:none;}
.ph{position:fixed;right:14px;bottom:14px;background:#2F4238;color:#E7DDC9;font-family:var(--mono);
 font-size:9.5px;letter-spacing:1.2px;padding:7px 11px;}
@media(max-width:700px){h1{font-size:36px;} .things{column-count:1;} .top nav{display:none;}}


/* the sample mark in the closing block. It is the demonstration, so it is real
   artwork at real size and the whole thing is the link. */
.close .demomark{display:block;max-width:620px;margin:32px auto 4px;line-height:0;
 transition:transform .12s ease, box-shadow .12s ease;}
.close .demomark svg{width:100%;height:auto;display:block;}
.close .demomark:hover{transform:translateY(-2px);box-shadow:0 7px 20px rgba(23,18,15,.15);}
.close .demomark:focus-visible{outline:2px solid var(--ox);outline-offset:4px;}
.close .cta{margin-top:28px;}
@media(max-width:700px){.close .demomark{margin-top:24px;}}


/* ---------------------------------------------------------------------------
   6  GET VERIFIED PAGE   /get-verified/   scoped under .gv
   --------------------------------------------------------------------------- */
/* body links: the homepage only styles buttons and nav, so prose links fall back to
   browser blue. Everything on a marketing page reads in the house colour. */
.gv a, .exnote a{color:var(--ox);text-decoration:underline;
 text-underline-offset:3px;text-decoration-thickness:1px;}
/* a telephone number is information, not navigation. The link is there so a phone
   can dial it, and for no other reason, so it should not read as something to click. */
.gv .calls a[href^="tel:"]{color:var(--ink);text-decoration:none;font-weight:600;}
.gv .calls a[href^="mailto:"]{color:var(--ox);text-decoration:underline;text-underline-offset:3px;}
.gv .calls{font-size:19px;line-height:2;}
.gv a:hover, .exnote a:hover{color:#5A181F;}
.gv a.btn{text-decoration:none;}
/* keep every section on the same left edge as the masthead, rather than re-centring */
.gv .wrap.narrow{max-width:1000px;}
.gvhead{padding:58px 0 10px;}
.gvhead h1{font-size:44px;max-width:18ch;}
.gv section{padding:44px 0;}
.gv .price{font-size:18px;}
.gv ol{padding-left:22px;max-width:66ch;color:#3B342C;}
.gv ol li{margin-bottom:10px;}
.gv .calls a{color:var(--ox);font-weight:600;}
.ofm{border:1px solid var(--rule);background:#F8F1E3;padding:28px 30px;margin:8px 0 0;max-width:720px;}
.ofm label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--ox);margin:0 0 6px;font-weight:600;}
.ofm input[type=text],.ofm input[type=email]{width:100%;padding:11px 13px;border:1px solid var(--rule);
 font-family:var(--serif);font-size:18px;margin-bottom:20px;background:#FCFAF6;color:var(--ink);}
.ofm fieldset{border:0;padding:0;margin:2px 0 22px;}
.ofm legend{font-family:var(--mono);font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
 color:var(--ox);padding:0;margin-bottom:12px;font-weight:600;}
.cats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);
 grid-auto-flow:column;gap:9px 26px;}
.cats label{display:flex;gap:10px;align-items:center;font-family:var(--serif);font-size:18px;
 letter-spacing:0;text-transform:none;color:var(--ink);margin:0;font-weight:400;}
@media(max-width:640px){.cats{grid-template-columns:1fr;grid-auto-flow:row;}}


/* ---------------------------------------------------------------------------
   7  EXAMPLE PAGES   /examples/marks/ and /examples/certificate/
   --------------------------------------------------------------------------- */
a.inline, .exnote a{color:var(--ox);text-decoration:underline;text-underline-offset:3px;}
section p a{color:var(--ox);text-decoration:underline;text-underline-offset:3px;
 text-decoration-thickness:1px;}
section p a.btn{text-decoration:none;}
.exhead{padding:58px 0 6px;}
.exhead h1{font-size:40px;max-width:20ch;}
.exgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:22px;margin:26px 0 0;}
.exgrid figure{margin:0;border:1px solid var(--rule);background:#F8F1E3;padding:18px;text-align:center;}
.exgrid svg{max-width:100%;height:auto;}
.exgrid figcaption{font-family:var(--mono);font-size:9.5px;letter-spacing:1.4px;color:var(--mut);
 margin-top:12px;text-transform:uppercase;}
.exlock{border:1px solid var(--rule);background:#F8F1E3;padding:22px;margin:22px 0 0;}
.exlock svg{max-width:100%;height:auto;display:block;}
.exnote{font-size:16.5px;color:var(--mut);max-width:66ch;}


/* ---------------------------------------------------------------------------
   8  ABOUT PAGE   /about/   scoped under .ab
   --------------------------------------------------------------------------- */
.ab{--maxread:68ch;}
.ab .wrap.narrow{max-width:820px;}
.abhead{padding:56px 0 4px;}
.abhead h1{font-size:42px;max-width:20ch;}
.ab section{padding:38px 0;}
.ab p{max-width:var(--maxread);}
.ab p a{color:var(--ox);text-decoration:underline;text-underline-offset:3px;
 text-decoration-thickness:1px;}
.ab p a.btn, .ab a.proceed{text-decoration:none;}
.ab h2{font-size:27px;margin-bottom:14px;}
.ab .lead{font-size:21px;color:#3B342C;}
.proceed{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:1.8px;
 padding:15px 24px;background:var(--ox);color:var(--pa);border:1.5px solid var(--ox);}
.proceed:hover{background:#5A181F;}
.pbar,.abclose{display:none;}
body.fromMark .pbar,body.fromMark .abclose{display:block;}
.pbar{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
 background:#F8F1E3;padding:18px 0;}
.pbar .wrap{max-width:820px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.pbar .lbl{font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--mut);}
.abclose{padding:40px 0 64px;}
.notl{border-left:2px solid var(--gi);padding:2px 0 2px 20px;margin:0 0 20px;}
.notl b{font-family:var(--disp);font-size:19px;color:var(--ox);font-weight:400;display:block;
 margin-bottom:3px;}
.notl p{margin:0;font-size:17px;}
.lv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:22px;}
.lv h3{margin-bottom:5px;}
.lv p{font-size:16.5px;margin:0;}
@media(max-width:700px){.abhead h1{font-size:32px;}}