/* ==========================================================================
   Accuro Consulting - accuroconsulting.com
   Editorial serif, off-white ground, one burgundy. Deliberately shares no
   typeface, colour or structural device with ipaddressbroker.net.
   ========================================================================== */

:root{
  color-scheme: light;
  --paper:#f6f6f4;
  --paper-2:#eceae6;
  --ink:#15171a;
  --ink-2:#5a5f63;
  --ink-3:#9aa0a2;
  --rule:#dedcd6;
  --rule-2:#e9e7e2;
  --wine:#7a2b34;
  --wine-dk:#5d2028;
  --wine-wash:#f2e9ea;
  --shell:1280px;
  --gut:clamp(1.25rem,5vw,4rem);
  --f-disp:"Newsreader",Georgia,"Times New Roman",serif;
  --f-body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:100px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--f-disp); font-weight:400; letter-spacing:-.015em; margin:0; text-wrap:balance}
p{margin:0 0 1.1rem}
p:last-child{margin-bottom:0}
a{color:inherit}
.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--gut)}
:focus-visible{outline:2px solid var(--wine); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:-9999px; top:0; z-index:100; background:var(--ink); color:#fff; padding:.7rem 1.1rem; font-size:.9rem; font-weight:600; text-decoration:none}
.skip:focus{left:0}

.kicker{font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--wine); margin:0 0 1.2rem}
.kicker-quiet{color:var(--ink-3)}

.btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.94rem; font-weight:600; text-decoration:none;
  padding:.85rem 1.6rem; background:var(--wine); color:#fff; border:1px solid var(--wine);
  transition:background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover{background:var(--wine-dk); border-color:var(--wine-dk); color:#fff}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn.ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.txtlink{font-size:.94rem; font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:2px}
.txtlink:hover{border-color:var(--ink)}
.inline-link{color:var(--wine); text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
.inline-link:hover{text-decoration-thickness:2px}

/* ---------------------------------------------------------------- masthead */
.mast{border-bottom:1px solid var(--rule); background:var(--paper); position:sticky; top:0; z-index:40}
.mast .shell{display:flex; align-items:center; gap:2.5rem; height:82px}
.brand{font-family:var(--f-disp); font-weight:400; font-size:1.55rem; letter-spacing:-.02em; text-decoration:none; white-space:nowrap}
.brand em{font-style:italic; color:var(--wine)}
.nav{margin-left:auto; display:flex; align-items:center; gap:2rem; font-size:.93rem}
.nav a{text-decoration:none; color:var(--ink-2); padding-bottom:2px; border-bottom:1px solid transparent; white-space:nowrap}
.nav a:hover{color:var(--ink); border-color:var(--wine)}
.nav a[aria-current="page"]{color:var(--ink); border-color:var(--rule)}
.nav .desk{display:inline-flex; align-items:center; gap:.35rem; color:var(--ink-2)}
.nav .desk svg{opacity:.55}
.nav .desk:hover svg{opacity:1}
.nav .cta{color:var(--wine); font-weight:600; border-bottom:1px solid var(--wine)}
.nav .cta:hover{color:var(--wine-dk); border-color:var(--wine-dk)}

.burger{display:none; background:none; border:0; cursor:pointer; padding:.5rem; margin-left:auto; margin-right:-.5rem}
.burger span{display:block; width:21px; height:1.5px; background:var(--ink)}
.burger span + span{margin-top:5px}
@media(max-width:900px){
  .burger{display:block}
  .nav{
    position:absolute; top:100%; left:0; right:0; margin:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:stretch; gap:0;
    padding:.5rem var(--gut) 1.6rem;
  }
  .nav[hidden]{display:none}
  .nav a{padding-block:.95rem; border-bottom:1px solid var(--rule-2); font-size:1.02rem}
}

/* -------------------------------------------------------------------- hero */
.hero .shell{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(2rem,5vw,4.5rem); align-items:center;
  padding-block:clamp(3rem,7vw,6rem);
}
@media(max-width:980px){.hero .shell{grid-template-columns:1fr; gap:2.5rem}}
.hero h1{font-size:clamp(2.2rem,4.6vw,4rem); line-height:1.04; font-weight:300; max-width:16ch}
.hero h1 em{font-style:italic; color:var(--wine)}
.lede{margin:1.6rem 0 0; font-size:1.14rem; color:var(--ink-2); max-width:46ch}
.actions{display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; margin-top:2.3rem}

/* The engravings: the visual language of certificates and bank notes, which
   is what an unvalued asset on a balance sheet actually is. One family, three
   forms, so no two pages open with the same object. */
.engraving{display:block; width:100%}
.engraving .ring{opacity:0; animation:ringIn 1400ms ease forwards}
@keyframes ringIn{to{opacity:var(--op)}}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes drift{to{transform:translateX(var(--shift))}}

/* rosette: the home page hero */
.engraving-rosette{max-width:600px; margin-inline:auto}
.engraving-rosette .eng-g{transform-origin:310px 310px; animation:turn 240s linear infinite}

/* gauge: a proportion, for the page about what is spare */
.engraving-gauge{max-width:420px; margin-inline:auto}
.engraving-gauge .eng-g{transform-origin:310px 310px; animation:turn 420s linear infinite}

/* band: a bank note border, run full width under the page head */
.engraving-band{max-width:none; height:clamp(80px,10vw,130px)}
.engraving-band .eng-g{animation:drift 26s linear infinite}
.band-strip{overflow:hidden; border-bottom:1px solid var(--rule)}

@media (prefers-reduced-motion: reduce){
  .engraving .ring{opacity:var(--op); animation:none}
  .engraving .eng-g{animation:none}
}

/* a page head that carries an engraving splits in two */
.page-head.with-figure .shell{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:center;
}
@media(max-width:900px){
  .page-head.with-figure .shell{grid-template-columns:1fr; gap:1.5rem}
  .engraving-gauge{max-width:300px}
}

/* -------------------------------------------------------------- page head */
.page-head{border-bottom:1px solid var(--rule)}
.page-head .shell{padding-block:clamp(2.6rem,6vw,4.5rem)}
.page-head h1{font-size:clamp(2rem,4.2vw,3.4rem); line-height:1.06; font-weight:300; max-width:18ch}
.page-head h1 em{font-style:italic; color:var(--wine)}
.crumbs{font-size:.82rem; color:var(--ink-3); margin:0 0 1.2rem}
.crumbs a{text-decoration:none; color:var(--ink-2)}
.crumbs a:hover{color:var(--wine)}
.crumbs span{margin-inline:.45rem}

/* ------------------------------------------------------------- standfirst */
.stand{border-top:1px solid var(--rule); padding-block:clamp(3.5rem,8vw,6rem)}
.stand .shell{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(2rem,6vw,5rem); align-items:start}
@media(max-width:900px){.stand .shell{grid-template-columns:1fr; gap:1.6rem}}
.stand-lab{font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); padding-top:.8rem; margin:0}
.stand p{margin:0 0 1.3rem; font-family:var(--f-disp); font-size:clamp(1.18rem,2.1vw,1.6rem); line-height:1.45; font-weight:300}
.stand p:last-child{margin-bottom:0; font-family:var(--f-body); font-size:1.05rem; color:var(--ink-2); line-height:1.65}

/* -------------------------------------------- practices as chapter openers */
.work{border-top:1px solid var(--rule)}
.block{border-bottom:1px solid var(--rule)}
.block .shell{
  display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(1.2rem,3vw,2.5rem);
  padding-block:clamp(2.8rem,6vw,4.6rem); align-items:start;
}
@media(max-width:900px){.block .shell{grid-template-columns:1fr; gap:1rem}}
.numeral{font-family:var(--f-disp); font-style:italic; font-weight:300; font-size:clamp(2.6rem,5vw,4.4rem); line-height:.9; color:var(--wine)}
.block h2{font-size:clamp(1.55rem,3vw,2.3rem); line-height:1.12; font-weight:300}
.block .who{margin:.9rem 0 0; font-size:.83rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
.block p{margin:0; color:var(--ink-2); max-width:50ch}
.block .more{display:inline-flex; align-items:center; gap:.4rem; margin-top:1.4rem; font-size:.92rem; font-weight:600; color:var(--wine); text-decoration:none; border-bottom:1px solid rgba(122,43,52,.28); padding-bottom:2px}
.block .more:hover{border-color:var(--wine)}
.block .more svg{opacity:.6}
.block .more:hover svg{opacity:1}
/* different indent per chapter, so four practices never read as four rows */
.block.p1 .numeral{grid-column:1/span 1} .block.p1 .hd{grid-column:2/span 4} .block.p1 .bd{grid-column:7/span 6}
.block.p2 .numeral{grid-column:2/span 1} .block.p2 .hd{grid-column:3/span 4} .block.p2 .bd{grid-column:8/span 5}
.block.p3 .numeral{grid-column:1/span 1} .block.p3 .hd{grid-column:2/span 5} .block.p3 .bd{grid-column:8/span 5}
.block.p4 .numeral{grid-column:3/span 1} .block.p4 .hd{grid-column:4/span 4} .block.p4 .bd{grid-column:9/span 4}
@media(max-width:900px){
  .block .numeral,.block .hd,.block .bd{grid-column:1/-1 !important}
  .block .bd{margin-top:.8rem}
}

/* ------------------------------------------------------------- prose pages */
.body-wrap{padding-block:clamp(3rem,7vw,5rem)}
.layout{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:clamp(2.5rem,6vw,5rem); align-items:start}
.layout > *{min-width:0}
@media(max-width:960px){.layout{grid-template-columns:1fr}}
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.4rem,2.7vw,1.95rem); font-weight:300; margin:2.6rem 0 .9rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--f-body); font-size:1.02rem; font-weight:600; margin:1.9rem 0 .5rem}
.prose p{color:var(--ink-2)}
.prose ul{list-style:none; margin:0 0 1.4rem; padding:0}
.prose ul li{position:relative; padding-left:1.6rem; margin-bottom:.75rem; color:var(--ink-2)}
.prose ul li::before{content:""; position:absolute; left:.35rem; top:.75em; width:5px; height:5px; background:var(--wine)}
.prose ul li b{color:var(--ink)}
.prose ol{margin:0 0 1.4rem; padding-left:1.3rem; color:var(--ink-2)}
.prose ol li{margin-bottom:.7rem}

.answer{
  border-left:2px solid var(--wine); background:var(--paper-2);
  padding:1.4rem 1.6rem; margin-bottom:2.4rem;
}
.answer h2{font-family:var(--f-body); font-size:1rem; font-weight:600; margin:0 0 .5rem}
.answer p{margin:0; color:var(--ink-2); font-size:.99rem}

.aside{position:sticky; top:104px; display:grid; gap:1.2rem}
@media(max-width:960px){.aside{position:static}}
.aside-card{border-top:2px solid var(--ink); padding-top:1.1rem}
.aside-card h2{font-family:var(--f-body); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin:0 0 .8rem}
.aside-card p{font-size:.94rem; color:var(--ink-2); margin-bottom:.9rem}
.aside-card ul{list-style:none; margin:0 0 1rem; padding:0}
.aside-card li{font-size:.93rem; color:var(--ink-2); padding-block:.5rem; border-top:1px solid var(--rule-2)}
.aside-card li:first-child{border-top:0}
.aside-link{font-size:.9rem; font-weight:600; color:var(--wine); text-decoration:none; border-bottom:1px solid rgba(122,43,52,.28); padding-bottom:1px}
.aside-link:hover{border-color:var(--wine)}

/* ------------------------------------------------------------- dark band */
.quote{background:var(--ink); color:#fff; padding-block:clamp(4rem,9vw,7rem)}
.quote blockquote{margin:0 auto; max-width:24ch; text-align:center; font-family:var(--f-disp); font-weight:300; font-size:clamp(1.75rem,4vw,3.1rem); line-height:1.18}
.quote blockquote em{font-style:italic; color:#dfb2b7}
.quote cite{display:block; margin-top:2rem; font-family:var(--f-body); font-style:normal; font-size:.82rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:#8d8b87}

/* -------------------------------------------------------------- contact */
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(1.5rem,4vw,3rem)}
.contact-card h2{font-family:var(--f-body); font-size:.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin:0 0 1rem; padding-bottom:.8rem; border-bottom:1px solid var(--rule)}
.contact-card address{font-style:normal; line-height:1.85; color:var(--ink-2)}
.contact-card dl{margin:0; display:grid; gap:.7rem}
.contact-card dt{font-size:.84rem; color:var(--ink-3)}
.contact-card dd{margin:0}
.contact-card dd a{color:var(--wine); text-decoration:none; border-bottom:1px solid rgba(122,43,52,.25)}
.contact-card dd a:hover{border-color:var(--wine)}

/* ----------------------------------------------------- the sibling site */
.desk-band{border-top:1px solid var(--rule); background:var(--paper-2)}
.desk-band .shell{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2.5rem; align-items:center; padding-block:clamp(2.6rem,6vw,4rem)}
@media(max-width:820px){.desk-band .shell{grid-template-columns:1fr; gap:1.6rem}}
.desk-band h2{font-size:clamp(1.4rem,2.8vw,2.05rem); font-weight:300; line-height:1.15; max-width:24ch}
.desk-band h2 em{font-style:italic; color:var(--wine)}
.desk-band p{margin:1rem 0 0; color:var(--ink-2); max-width:52ch; font-size:1rem}

/* -------------------------------------------------------------- closing */
.close{padding-block:clamp(4rem,9vw,6.5rem)}
.close .shell{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2.5rem; align-items:end}
@media(max-width:820px){.close .shell{grid-template-columns:1fr}}
.close h2{font-size:clamp(1.85rem,4vw,2.9rem); font-weight:300; max-width:20ch; line-height:1.12}
.close p{margin:1.2rem 0 0; color:var(--ink-2); max-width:44ch}

/* --------------------------------------------------------------- footer */
.site-foot{border-top:1px solid var(--rule); padding-block:3rem 3.4rem; font-size:.94rem; color:var(--ink-2)}
.foot-grid{display:grid; grid-template-columns:1.5fr repeat(3,1fr); gap:2.4rem}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.site-foot .brand{font-size:1.3rem; display:inline-block; margin-bottom:1rem}
.site-foot h2{font-family:var(--f-body); font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); margin:0 0 .9rem}
.site-foot ul{list-style:none; margin:0; padding:0}
.site-foot li a{display:block; text-decoration:none; padding-block:.22rem}
.site-foot li a:hover{color:var(--wine)}
.site-foot address{font-style:normal; line-height:1.8}
.foot-legal{margin:2.6rem 0 0; padding-top:1.2rem; border-top:1px solid var(--rule); display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem; font-size:.82rem; color:var(--ink-3)}
.foot-legal a{text-decoration:none}
.foot-legal a:hover{color:var(--wine)}

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

/* --------------------------------------------------------------- the form */
.cform{margin-top:2.4rem; max-width:60ch}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:1.2rem}
@media(max-width:640px){.field-row{grid-template-columns:1fr; gap:0}}
.field{margin:0 0 1.3rem; display:block}
.field label{display:block; font-size:.88rem; font-weight:600; margin-bottom:.4rem}
.field label span{color:var(--wine)}
.field input,.field textarea{
  width:100%; font-family:var(--f-body); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--rule); border-radius:0;
  padding:.75rem .85rem; transition:border-color .15s ease;
}
.field textarea{resize:vertical; min-height:9rem; line-height:1.55}
.field input::placeholder{color:var(--ink-3)}
.field input:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field textarea:focus{outline:2px solid var(--wine); outline-offset:1px; border-color:var(--wine)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--wine); background:#fdf7f7}
.field-help{display:block; font-size:.84rem; color:var(--ink-3); margin-top:.4rem}
.field-err{margin:.4rem 0 0; font-size:.86rem; font-weight:600; color:var(--wine)}

.form-note{padding:.9rem 1.1rem; margin:0 0 1.6rem; font-size:.94rem}
.form-note-err{border-left:2px solid var(--wine); background:#fdf3f3; color:var(--ink)}

.form-foot{display:flex; flex-wrap:wrap; align-items:center; gap:1.2rem; margin-top:.4rem}
.form-foot .btn{border-radius:0; cursor:pointer; font-family:var(--f-body)}
.form-foot .field-help{margin-top:0; max-width:26ch}

/* the honeypot: out of sight, out of the tab order, invisible to assistive
   tech, and still a real input a scripted bot will fill */
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.form-done{border-left:2px solid var(--wine); background:var(--paper-2); padding:1.6rem 1.8rem; max-width:62ch}
.form-done h2{font-size:clamp(1.3rem,2.4vw,1.7rem); font-weight:300; margin-bottom:.8rem}
.form-done p{color:var(--ink-2)}

/* the home page's liftable definition, the thing answer engines quote */
.sec-answer{padding-block:clamp(2rem,4vw,3rem) 0}
.sec-answer .answer{margin-bottom:0}