/* Self-hosted webfonts. No request leaves the visitor's browser for a third party. */
  /* greek-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 300;font-display: swap;src: url(/assets/fonts/inter-normal-300-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 300;font-display: swap;src: url(/assets/fonts/inter-normal-300-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 300;font-display: swap;src: url(/assets/fonts/inter-normal-300-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 300;font-display: swap;src: url(/assets/fonts/inter-normal-300-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;}
  /* greek-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/inter-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/inter-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/inter-normal-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;}
  /* greek-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/inter-normal-500-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/inter-normal-500-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/inter-normal-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Inter';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/inter-normal-500-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;}
  /* greek-ext */ @font-face {font-family: 'Literata';font-style: italic;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Literata';font-style: italic;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-italic-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Literata';font-style: italic;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-italic-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Literata';font-style: italic;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-italic-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;}
  /* greek-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-normal-400-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-normal-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 400;font-display: swap;src: url(/assets/fonts/literata-normal-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;}
  /* greek-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/literata-normal-500-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/literata-normal-500-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/literata-normal-500-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 500;font-display: swap;src: url(/assets/fonts/literata-normal-500-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;}
  /* greek-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/literata-normal-600-greek-ext.woff2) format('woff2');unicode-range: U+1F00-1FFF;}
  /* greek */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/literata-normal-600-greek.woff2) format('woff2');unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;}
  /* latin-ext */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/literata-normal-600-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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
  /* latin */ @font-face {font-family: 'Literata';font-style: normal;font-weight: 600;font-display: swap;src: url(/assets/fonts/literata-normal-600-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;}
:root{--s6:clamp(48px,4.4vw,72px);--s7:clamp(64px,6vw,96px);--s8:clamp(88px,8vw,128px);
    --hero1:#1A1816; --hero2:#0D0C0B;
    --paper:#FAFAF9; --paper2:#F2F1EF;
    --ink:#1A1817; --body:#423D39; --mute:#6E6862;
    --line:rgba(26,24,23,.14); --hair:rgba(26,24,23,.08);
    --accent:#8C4F30; --accent-lt:#D4967D;
    --link:#8C4F30; --link-hover:#6E4630; --link-visited:#A9643F;
    --onDark:#F2F3F4; --onDarkMute:rgba(242,243,244,.6); --onDarkLine:rgba(242,243,244,.14);
    --serif:"Literata",Georgia,serif; --sans:"Inter",system-ui,sans-serif;
    --w:1220px; --gut:clamp(24px,5vw,64px); --r:4px; --measure:68ch;
    color-scheme:light;
  }
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:linear-gradient(180deg,var(--hero1),var(--hero2)) fixed;
    color:var(--body);font-family:var(--sans);font-size:17px;line-height:1.8;
    -webkit-font-smoothing:antialiased}
  .wrap{max-width:var(--w);margin:0 auto;padding:0 var(--gut)}
  a{color:inherit}
  ::selection{background:var(--accent-lt);color:var(--ink)}
  #plan{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:0;pointer-events:none}
  .label{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.24em;
    color:var(--accent);margin:0 0 20px;display:flex;gap:14px;align-items:center}
  .label i{width:28px;height:1px;background:currentColor;flex:none}

  /* header */
  .top{position:relative;z-index:1;color:var(--onDark)}
  .top::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:radial-gradient(120% 130% at 22% 30%,rgba(13,12,11,.88),rgba(13,12,11,.42) 62%,transparent)}
  .nav{display:flex;align-items:center;justify-content:space-between;height:84px;
    border-bottom:1px solid var(--onDarkLine)}
  .mark{display:flex;align-items:center;margin-right:40px;font-family:var(--serif);font-size:19px;text-decoration:none;color:var(--onDark)}
  .nav ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
  .nav a{font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:rgba(242,243,244,.92)}
  .nav a:hover{color:var(--onDark)}
  .navcta{margin-left:14px;font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.1em;
    text-decoration:none;color:var(--onDark);border:1px solid var(--onDarkLine);
    padding:12px 20px;border-radius:var(--r);white-space:nowrap}
  .navcta:hover{border-color:var(--accent-lt);color:var(--accent-lt)}
  /* ---------- Mobile drawer ---------- */
  .burger{display:none;background:none;border:1px solid var(--onDarkLine);border-radius:var(--r);
    width:46px;height:40px;position:relative;cursor:pointer}
  .burger span{position:absolute;left:11px;right:11px;height:1px;background:var(--onDark);
    transition:transform .22s,top .22s,bottom .22s}
  .burger span:nth-child(1){top:15px} .burger span:nth-child(2){bottom:15px}
  .burger[aria-expanded="true"] span:nth-child(1){top:20px;transform:rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){bottom:20px;transform:rotate(-45deg)}
  .burger:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}
  .drawer{position:fixed;inset:0;z-index:80;background:var(--hero2);
    padding:96px var(--gut) 40px;display:flex;flex-direction:column;
    transform:translateX(100%);visibility:hidden;transition:transform .3s,visibility .3s;
    overflow-y:auto}
  .drawer[data-open="true"]{transform:none;visibility:visible}
  .drawer a{font-family:var(--serif);font-size:clamp(24px,6.4vw,38px);color:var(--onDark);
    text-decoration:none;padding:15px 0;border-bottom:1px solid var(--onDarkLine)}
  .drawer a:last-of-type{border-bottom:0}
  .drawer a:focus-visible{outline:2px solid var(--accent-lt);outline-offset:3px}
  .drawer .close{position:absolute;top:26px;right:var(--gut);background:none;border:0;
    color:var(--onDarkMute);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
  .drawer .close::after{content:"";position:absolute;inset:-14px -12px}
  @media(max-width:1023px){.nav ul{display:none}.navcta{display:none}.burger{display:block}}
  @media(min-width:1024px){.drawer{display:none}}

  .masthead{padding-top:var(--s8);padding-bottom:var(--s6)}
  .crumb{font-size:12px;color:var(--onDarkMute);margin:0 0 26px}
  .crumb a{text-decoration:none;border-bottom:1px solid var(--onDarkLine)}
  .masthead h1{font-family:var(--serif);font-weight:400;color:var(--onDark);
    font-size:clamp(40px,5.4vw,64px);line-height:1.06;letter-spacing:-.018em;
    margin:0 0 26px;max-width:22ch}
  .byline{display:flex;flex-wrap:wrap;gap:10px 26px;font-size:13px;color:var(--onDarkMute);
    padding-top:22px;border-top:1px solid var(--onDarkLine)}
  .byline b{color:var(--onDark);font-weight:500}

  /* body */
  .sheet{position:relative;z-index:1;background:var(--paper)}
  .cols{display:grid;grid-template-columns:minmax(0,1fr) 260px;
    gap:clamp(30px,5vw,72px);padding:var(--s6) 0 var(--s7)}
  @media(max-width:1000px){.cols{grid-template-columns:1fr}}

  .article{max-width:var(--measure)}
  .article h2{font-family:var(--serif);font-weight:400;color:var(--ink);
    font-size:clamp(24px,2.4vw,33px);line-height:1.2;letter-spacing:-.010em;
    margin:54px 0 16px;scroll-margin-top:96px}
  .article h3{font-family:var(--serif);font-weight:500;color:var(--ink);
    font-size:clamp(18px,1.5vw,21px);line-height:1.3;letter-spacing:0;
    margin:36px 0 12px;scroll-margin-top:96px}
  .article p{margin:0 0 18px}
  .article strong{font-weight:600;color:var(--ink)}
  .article ul,.article ol{margin:0 0 18px;padding-left:1.3em}
  .article li{margin-bottom:9px}
  .article li::marker{color:var(--accent)}
  .article a.link{color:var(--link);text-decoration:underline;text-underline-offset:3px;
    text-decoration-thickness:1px}
  .article a.link:visited{color:var(--link-visited)}
  .article a.link:hover{color:var(--link-hover);text-decoration-thickness:2px}
  a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

  .quick{background:var(--paper2);border-left:3px solid var(--accent);
    padding:clamp(22px,3vw,30px);border-radius:0 var(--r) var(--r) 0;margin:0 0 40px}
  .quick p{margin:0}
  .quick .k{display:block;font-size:10.5px;font-weight:500;text-transform:uppercase;
    letter-spacing:.2em;color:var(--accent);margin-bottom:10px}

  .steps{list-style:none;counter-reset:s;padding:0;margin:0 0 18px}
  .steps li{counter-increment:s;position:relative;padding-left:2.6em;margin-bottom:14px}
  .steps li::before{content:counter(s);position:absolute;left:0;top:.1em;
    font-family:var(--serif);color:var(--accent);font-size:15px;
    width:1.8em;text-align:left;border-bottom:1px solid var(--accent);padding-bottom:2px}

  .faq{margin-top:14px;border-top:1px solid var(--line)}
  .faq details{border-bottom:1px solid var(--hair)}
  .faq summary{cursor:pointer;list-style:none;padding:18px 34px 18px 0;position:relative;
    font-family:var(--serif);font-size:clamp(17px,1.7vw,20px);color:var(--ink);line-height:1.4}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
    border-right:1px solid var(--accent);border-bottom:1px solid var(--accent);
    transform:translateY(-70%) rotate(45deg);transition:transform .2s}
  .faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
  .faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .faq p{padding:0 0 20px;margin:0;max-width:62ch}

  .signoff{margin-top:56px;padding-top:30px;border-top:1px solid var(--line);
    display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap}
  .signoff img{width:76px;height:100px;object-fit:cover;object-position:50% 20%;
    border-radius:var(--r);flex:none}
  .signoff h4,.signoff h3.h4,.signoff h2.h4{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--ink);margin:0 0 2px}
  .signoff .role{font-size:10.5px;font-weight:500;text-transform:uppercase;
    letter-spacing:.18em;color:var(--mute);margin:0 0 12px}
  .signoff p{margin:0;font-size:15.5px;max-width:52ch}

  .contactbox{margin-top:40px;padding:26px 28px;border:1px solid var(--line);border-radius:var(--r)}
  .contactbox h4,.contactbox h3.h4,.contactbox h2.h4{font-family:var(--serif);font-weight:400;font-size:20px;color:var(--ink);margin:0 0 12px}
  .contactbox p{margin:0 0 8px;font-size:15.5px}
  .disclaimer{margin-top:34px;font-size:13.5px;color:var(--mute);font-style:italic;max-width:62ch}

  /* aside */
  .aside{position:sticky;top:26px;align-self:start;font-size:14px}
  @media(max-width:1000px){.aside{position:static;order:-1;margin-bottom:42px;border-bottom:1px solid var(--line);padding-bottom:30px}}
  .aside h5,.aside h3.h5{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;
    color:var(--mute);margin:0 0 16px}
  .aside ol{list-style:none;margin:0 0 30px;padding:0;counter-reset:toc}
  .aside li{counter-increment:toc;margin-bottom:2px}
  .aside a{display:block;text-decoration:none;color:var(--mute);padding:6px 0 6px 30px;
    position:relative;line-height:1.45;border-left:1px solid var(--hair);transition:.2s}
  .aside a::before{content:counter(toc,decimal-leading-zero);position:absolute;left:12px;
    font-size:11px;color:var(--accent);opacity:.65}
  .aside a:hover,.aside a[aria-current="true"]{color:var(--ink);border-left-color:var(--accent)}
  .progress{height:2px;background:var(--hair);border-radius:2px;overflow:hidden;margin-bottom:26px}
  .progress i{display:block;height:100%;width:0;background:var(--accent)}

  /* related + footer */
  .related{border-top:1px solid var(--line);padding:var(--s7) 0}
  .related h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,1.9vw,26px);
    color:var(--ink);margin:0 0 26px;letter-spacing:-.014em}
  .rlist{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
  @media(max-width:760px){.rlist{grid-template-columns:1fr}}
  .rcard{background:var(--paper);padding:26px 28px;text-decoration:none;display:block;transition:background .25s}
  .rcard:hover{background:var(--paper2)}
  .rcard span{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
  .rcard h4,.rcard h3.h4,.rcard h2.h4{font-family:var(--serif);font-weight:400;color:var(--ink);font-size:20px;
    line-height:1.3;margin:12px 0 0}

  .footwrap{position:relative;z-index:1;background:var(--paper)}
  footer{padding:54px 0;border-top:1px solid var(--line);color:var(--mute);font-size:13.5px}
  .fbar{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .note{font-size:12px;color:var(--mute);max-width:74ch;margin-top:18px;line-height:1.6}
  .flag{position:fixed;left:12px;bottom:12px;z-index:60;background:var(--accent);color:#fff;
    font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:9px 14px;
    text-decoration:none;border-radius:var(--r)}
  .skip{position:absolute;left:-9999px;background:var(--paper);color:var(--ink);
    padding:12px 18px;z-index:99;border-radius:var(--r)}
  .skip:focus{left:12px;top:12px}

  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @media print{
    body{background:#fff;color:#000;font-size:11pt}
    #plan,.aside,.flag,.nav,.related,.skip{display:none}
    .top::after{display:none}
    .top,.masthead h1,.byline{color:#000}
    .cols{grid-template-columns:1fr;padding:0}
    .article{max-width:none}
    .article a.link{color:#000;text-decoration:underline}
    .article a.link[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
    .article h2,.article h3{break-after:avoid;page-break-after:avoid}
    .quick,.contactbox,.signoff,details{break-inside:avoid;page-break-inside:avoid}
    details[open] p, details p{display:block!important}
    details summary::after{display:none}
    p,li{orphans:3;widows:3}
    @page{margin:18mm}
  }

/* sticky masthead, larger navigation type */
.top{background:var(--ink)}
.nav ul a{font-size:12px}
.nav ul{gap:20px}
.navcta{font-size:12.5px}
.mark{font-size:17px}
@media(max-width:900px){.nav ul a{font-size:12px}}
.mark .lk{display:inline-flex;align-items:center;gap:8px}.mark .lk img{height:16px;width:auto;display:block}.mark .rule{width:1px;height:22px;background:rgba(242,243,244,.28)}.mark .nm{font-family:var(--serif);font-weight:500;font-size:12.5px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}.mark .nm .llc{font-size:68%;letter-spacing:.09em}@media(max-width:1180px){.mark .lk{gap:7px}.mark .lk img{height:14px}.mark .nm{font-size:11.5px}.mark .rule{height:19px}}
.footmark{display:inline-flex;align-items:center;gap:9px;margin:0 0 26px;text-decoration:none}.footmark img{height:17px;width:auto;display:block}.frule{width:1px;height:23px;background:rgba(26,24,23,.22)}.fnm{font-family:var(--serif);font-weight:500;font-size:13px;line-height:1;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;color:var(--ink)}.fnm .llc{font-size:68%;letter-spacing:.09em}
@media(max-width:760px){.mark .lk{gap:6px}.mark .lk img{height:13px}.mark .nm{font-size:10.5px}.mark .rule{height:17px}.footmark{gap:8px}.footmark img{height:14px}.fnm{font-size:11px}.frule{height:19px}}
.railcard{margin-top:30px;border-top:1px solid var(--line);padding-top:22px}
.railcard .k{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);margin:0 0 14px}
.railcard .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.railcard img{width:44px;height:56px;object-fit:cover;object-position:50% 18%;border-radius:var(--r);flex:none}
.railcard .nm{font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.2}
.railcard .rl{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);margin-top:3px}
.railcard p{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 8px}
.railcard a{display:inline;padding:0;border-left:0;color:var(--accent);text-decoration:none;border-bottom:1px solid var(--hair)}
.railcard a::before{content:none}
@media(max-width:1000px){.railcard{display:none}}
@media(min-width:1100px){
  .article{counter-reset:sec}
  .article h2[id]{counter-increment:sec;position:relative}
  .article h2[id]::before{content:counter(sec,decimal-leading-zero);position:absolute;left:-56px;top:14px;
    font-family:var(--serif);font-size:13px;letter-spacing:.04em;color:var(--accent)}
}
.figs{width:100%;border-collapse:collapse;margin:18px 0 8px;font-size:15px}
.figs td{padding:11px 0;border-top:1px solid var(--hair)}
.figs td:last-child{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.figs td.note{font-size:12.5px;color:var(--mute);white-space:normal;text-align:left}
a[href^="tel:"],a[href^="mailto:"]{white-space:nowrap}
@media (forced-colors: active){
    .btn,.navcta{border:1px solid ButtonText}
    .burger span{background:ButtonText}
  }
.checklist{list-style:none;margin:0;padding:0}.checklist li{position:relative;padding:11px 0 11px 24px;margin:0;font-size:16px;border-bottom:1px solid var(--hair)}.checklist li:last-child{border-bottom:0}.checklist li::before{content:"";position:absolute;left:0;top:calc(.62em + 11px);width:9px;height:1px;background:var(--accent)}
.sumlab{font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--accent);margin:26px 0 12px;display:flex;align-items:center;gap:12px}.sumlab::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}

.btn{display:inline-block;border:0;cursor:pointer;font-family:var(--sans);font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:.16em;padding:17px 28px;border-radius:var(--r);background:var(--accent);color:var(--paper);text-decoration:none}
.btn:hover{background:#A05B38}
.drawer .drawer-cta{font-family:var(--sans);font-size:11.5px;line-height:1.2;letter-spacing:.16em;padding:17px 22px;border-bottom:0;display:block;margin-top:26px;color:var(--paper);text-align:center}
.arealist{border-top:1px solid var(--hair);counter-reset:ar;padding-left:64px}.arealist h3.mid{counter-increment:ar;position:relative;padding-top:28px;margin:0}.arealist h3.mid::before{content:counter(ar,decimal-leading-zero);position:absolute;left:-64px;top:34px;font-family:var(--serif);font-size:13px;color:var(--accent)}.arealist p{margin:10px 0 0;padding-bottom:28px;border-bottom:1px solid var(--hair);max-width:76ch}@media(max-width:760px){.arealist{padding-left:36px}.arealist h3.mid::before{left:-36px;top:32px}}
.fgrid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,5vw,64px);padding-bottom:44px;border-bottom:1px solid var(--hair)}.fgrid h3,.fgrid h4,.fgrid .h4{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.18em;color:var(--ink);margin:0 0 16px}.fgrid ul{list-style:none;margin:0;padding:0}.fgrid li{margin-bottom:9px}.fgrid a{text-decoration:none;color:var(--mute)}.fgrid a:hover{color:var(--accent)}@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
@media(max-width:1180px){.nav ul{gap:16px}.nav ul a{font-size:11px}.navcta{font-size:10px;padding:10px 13px;letter-spacing:.13em}}
@media(max-width:1280px){html[lang=el] .nav ul{gap:12px}html[lang=el] .nav ul a{font-size:11px;letter-spacing:.05em}html[lang=el] .navcta{font-size:10px;padding:10px 11px;letter-spacing:.07em;margin-left:10px}}
.article{max-width:60ch}h1,h2,h3,.big,.mid{text-wrap:balance}p,li,.stand,.lede{text-wrap:pretty}.checklist li::before{top:calc(.62em + 11px)}
.article h2{margin:78px 0 16px}
.article .keyline{font-family:var(--serif);font-size:clamp(20px,2vw,25px);line-height:1.42;color:var(--ink);border-left:2px solid var(--accent);padding:2px 0 2px 24px;margin:46px 0}.article h3{margin:40px 0 10px}.quick{background:none;border-left:2px solid var(--accent);border-radius:0;padding:2px 0 2px 24px;margin-left:-26px;max-width:62ch}.quick .k{font-size:11px;letter-spacing:.18em;margin-bottom:8px}@media(max-width:900px){.quick{margin-left:0}}.byline{gap:0 10px;align-items:baseline}.byline > * + *::before{content:"\00b7";margin-right:10px;color:var(--onDarkLine)}.checklist li::before{top:calc(.7em + 11px)}
.toc-fold{margin:0}.toc-fold > summary{list-style:none;cursor:pointer;font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--mute);padding:8px 0}.toc-fold > summary::-webkit-details-marker{display:none}.toc-fold > summary::after{content:"+";float:right;color:var(--accent);font-size:14px;line-height:1}.toc-fold[open] > summary::after{content:"\2212"}.toc-fold[open] > summary{margin-bottom:8px}
.linklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:0}.linklist li{margin:0}.linklist a{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:16px 0;border-top:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:16.5px}.linklist li:last-child a{border-bottom:1px solid var(--hair)}.linklist a::after{content:"\2192";color:var(--accent);flex:none}.linklist a:hover{color:var(--accent)}
section{padding:var(--s7) 0}

/* --- conversion: mobile action bar + article CTA line --- */
.ctaline{border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:18px 0 6px;font-size:15px;color:var(--body)}
.ctaline a{color:var(--link)}
.actbar{display:none}
@media(max-width:760px){
  .actbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;background:var(--ink);
    padding-bottom:env(safe-area-inset-bottom);border-top:2px solid var(--accent-lt);
    box-shadow:0 -10px 28px rgba(26,24,23,.22)}
  .actbar a{flex:1;display:block;text-align:center;padding:16px 4px 15px;color:#FAFAF9;text-decoration:none;
    font:500 13.5px/1 var(--sans);letter-spacing:.05em}
  .actbar a+a{border-left:1px solid rgba(250,250,249,.16)}
  .actbar a b{font-weight:500}
  body:has(.actbar){padding-bottom:calc(50px + env(safe-area-inset-bottom))}
}

/* --- byline: stack on narrow screens so wrapped lines stay flush left --- */
@media(max-width:760px){
  .byline{flex-direction:column;align-items:flex-start;gap:5px 0}
  .byline > * + *::before{content:none}
}

/* ---------- Dark footer, 18 August 2026 ----------
   The page now closes on the same ink it opens on. The office has its own
   column with a map link, and the small print sits on one row across the full
   width instead of stacked in a narrow left column. */
.footwrap{background:var(--ink)}
footer{border-top:0;color:var(--onDarkMute)}
.fnm{color:var(--onDark)}
.frule{background:rgba(242,243,244,.28)}
.fgrid{grid-template-columns:1.5fr .85fr 1.15fr 1.05fr;border-bottom:1px solid rgba(242,243,244,.12)}
/* Five columns where the page carries the fixed fee services list. */
.fgrid:has(> div:nth-child(5)){grid-template-columns:1.25fr .75fr .95fr 1.05fr .95fr;
  gap:clamp(20px,3vw,44px)}
@media(max-width:1080px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr 1fr}}
@media(max-width:820px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid:has(> div:nth-child(5)){grid-template-columns:1fr}}
.fgrid h3,.fgrid h4,.fgrid .h4{color:var(--onDark)}
.fgrid a{color:var(--onDarkMute)}
.fgrid a:hover{color:var(--accent-lt)}
.fdesc{max-width:38ch;margin:0}
.faddr{font-style:normal;margin:0;line-height:1.75}
.fmapline{margin:12px 0 0}
.fmap{color:var(--accent-lt);text-decoration:none;border-bottom:1px solid rgba(212,150,125,.35);
  padding-bottom:1px}
.fmap:hover{border-bottom-color:var(--accent-lt)}
.fhrs{margin:12px 0 0;font-size:12.5px;color:rgba(242,243,244,.52)}
.nb{white-space:nowrap}
.fbar{display:block;margin-top:30px}
.note{color:rgba(242,243,244,.52);max-width:74ch;margin:0 0 18px}
.fends{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px clamp(18px,3vw,44px);flex-wrap:wrap}
.fends .reg{margin:0;font-size:12.5px;color:rgba(242,243,244,.52)}
.fends .flang{margin-left:auto}
.fends a{color:rgba(242,243,244,.62);text-decoration:none;
  border-bottom:1px solid rgba(242,243,244,.22);padding-bottom:1px}
.fends a:hover{color:var(--accent-lt);border-bottom-color:var(--accent-lt)}
@media(max-width:1000px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fgrid{grid-template-columns:1fr}
  .fends{flex-direction:column;align-items:flex-start;gap:12px}
  .fends .flang{margin-left:0}}
@media(max-width:760px){footer{padding-bottom:78px}}

/* ---- The touch layer, 19 August 2026. Additive only: motion on the elements
   that answer the pointer, stillness for those who asked for it. ---- */
html{scroll-behavior:smooth}
.btn{transition:background .22s ease,transform .22s ease,box-shadow .22s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(26,24,23,.18)}
.btn:active{transform:none;box-shadow:0 3px 10px rgba(26,24,23,.14)}
.navcta{transition:border-color .22s ease,color .22s ease}
.art h3,.art h4,.art .h4,.tl-item h3 a{transition:color .22s ease}
td,th{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---- polish v3: selection, focus ring, scrollbar, quiet depth ---- */
::selection{background:rgba(140,79,48,.16)}
html{scrollbar-width:thin;scrollbar-color:rgba(140,79,48,.35) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,79,48,.3);border-radius:8px;
  border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(140,79,48,.5)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}
body{-webkit-tap-highlight-color:transparent}
summary{cursor:pointer}
.top{background-image:radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)}
.btn{background-image:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.05))}

.rcard{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.rcard:hover{transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(26,24,23,.45)}
@media (prefers-reduced-motion:reduce){.rcard:hover{transform:none}}

/* ---- polish v4: the showpieces. Footer wordmark, grain, drawn underlines ---- */
.top{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"),
  radial-gradient(130% 110% at 85% -25%,rgba(212,150,125,.09),transparent 55%)}
.nav ul a{background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-size:0% 1px;background-position:0 calc(100% - 1px);
  transition:background-size .3s ease,color .2s ease}
.nav ul a:hover{background-size:100% 1px}
body{animation:pageIn .45s ease both}
@keyframes pageIn{from{opacity:0}}

/* ---- polish v5: the touches you meet every visit ---- */
details summary{transition:color .2s ease}
details summary:hover{color:var(--accent)}
details summary::after{transition:transform .3s ease}
details[open] summary::after{content:"+";transform:rotate(45deg)}
details[open] .a{animation:ansIn .35s ease}
@keyframes ansIn{from{opacity:0;transform:translateY(-4px)}}
.drawer a{opacity:0;transform:translateY(14px);
  transition:transform .5s cubic-bezier(.2,.6,.2,1),opacity .5s ease}
.drawer[data-open="true"] a{opacity:1;transform:none}
.drawer[data-open="true"] a:nth-of-type(2){transition-delay:.05s}
.drawer[data-open="true"] a:nth-of-type(3){transition-delay:.09s}
.drawer[data-open="true"] a:nth-of-type(4){transition-delay:.13s}
.drawer[data-open="true"] a:nth-of-type(5){transition-delay:.17s}
.drawer[data-open="true"] a:nth-of-type(6){transition-delay:.21s}
.drawer[data-open="true"] a:nth-of-type(7){transition-delay:.25s}
.drawer[data-open="true"] a:nth-of-type(8){transition-delay:.29s}
.drawer[data-open="true"] a:nth-of-type(9){transition-delay:.33s}
.drawer[data-open="true"] a:nth-of-type(10){transition-delay:.36s}
.invite{border-top:1px solid rgba(212,150,125,.16)}

/* ---- polish v6: the expensive pass, 21 August 2026. Materials rather than
   ornament: a copper seam where the paper meets the ink, the monogram set
   into the footer like a maker's stamp, page-to-page continuity, a composed
   entrance for the article head, a reading thread along the top edge, and
   proper clothes for tables, quotations, rules, and the printed page. ---- */

html{text-rendering:optimizeLegibility;font-kerning:normal}
:target{scroll-margin-top:96px}

/* Page-to-page continuity. Browsers that can cross-fade whole documents do,
   and the body fade steps aside there so the two effects do not stack. */
@view-transition{navigation:auto}
::view-transition-old(root){animation-duration:.22s}
::view-transition-new(root){animation-duration:.22s}
@supports (view-transition-name:root){body{animation:none}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* The article head arrives composed: label, headline, byline, each a beat
   behind the one before. Opacity and transform only; nothing reflows. */
@media (prefers-reduced-motion:no-preference){
  .masthead .label{animation:mastIn .55s cubic-bezier(.2,.6,.2,1) both}
  .masthead h1{animation:mastIn .65s cubic-bezier(.2,.6,.2,1) .07s both}
  .masthead .stand,.masthead .lede,.masthead .byline{
    animation:mastIn .7s cubic-bezier(.2,.6,.2,1) .15s both}
}
@keyframes mastIn{from{opacity:0;transform:translateY(12px)}}

/* The reading thread: a copper line along the top edge that measures the
   article as it is read. Browsers without scroll timelines see nothing. */
@supports (animation-timeline: scroll()){
  body::after{content:"";position:fixed;top:0;left:0;right:0;height:2px;z-index:75;
    background:linear-gradient(90deg,var(--accent),var(--accent-lt));
    transform-origin:0 50%;transform:scaleX(0);
    animation:readline linear both;animation-timeline:scroll(root)}
  @keyframes readline{to{transform:scaleX(1)}}
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}

/* The seam: where the paper sheet meets the ink above it, a thread of copper
   light; and a hairline between the invite and the footer, which sat on the
   same ink with no edge. */
.sheet{box-shadow:0 -1px 0 rgba(212,150,125,.22)}
.footwrap{border-top:1px solid rgba(242,243,244,.07)}


/* Buttons carry an inner light along the top edge, the way lacquer catches
   it, kept through the hover and dimmed on the press. */
.btn{box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 22px rgba(26,24,23,.18)}
.btn:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 3px 10px rgba(26,24,23,.14)}
.navcta{transition:border-color .22s ease,color .22s ease,background-color .22s ease}
.navcta:hover{background:rgba(212,150,125,.07)}

/* The arrows answer the pointer. */
.linklist a::after{transition:transform .25s ease}
.linklist a:hover::after{transform:translateX(4px)}

/* Portraits sit on the page like mounted plates: a hairline edge and a
   shadow that falls away, not a glow. */
.lead img{box-shadow:0 0 0 1px var(--hair),0 16px 30px -22px rgba(26,24,23,.55)}

/* Any table in the running text sits on the same hairlines as everything
   else. A table with its own finish, like .figs, keeps it; this is the floor. */
table{border-collapse:collapse}
.article table{width:100%;margin:26px 0;font-size:15.5px;line-height:1.6}
th{font-family:var(--sans);font-size:10.5px;font-weight:500;text-transform:uppercase;
  letter-spacing:.16em;color:var(--mute);text-align:left;padding:10px 20px 10px 0;
  border-bottom:1px solid var(--line)}
td{padding:11px 20px 11px 0;border-bottom:1px solid var(--hair);vertical-align:top}
th:last-child,td:last-child{padding-right:0}

/* A quotation is set in the serif on the copper spine the keyline wears. */
blockquote{margin:32px 0;padding:2px 0 2px 24px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:clamp(18px,1.7vw,21px);line-height:1.55;color:var(--ink)}
blockquote p{max-width:52ch}
blockquote p:last-child{margin-bottom:0}
cite{font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute)}

/* A rule in running text is short, copper and quiet, not a fence. */
.article hr{border:0;width:56px;height:1px;background:var(--accent);
  margin:44px 0;opacity:.6}
.article figure{margin:32px 0}
.article figure img{max-width:100%;height:auto;display:block;border-radius:var(--r)}
figcaption{font-size:13px;color:var(--mute);margin-top:10px}

/* The printed page: chrome off, ink on white, the letterhead voice. Clients
   print advice; the print should look like it came from the same firm. */
@media print{
  body{background:#fff!important;color:#1A1817;animation:none}
  body::after{display:none}
  #plan,.nav ul,.navcta,.burger,.drawer,.actbar,.flag,.skip,.invite,
  .toc-fold{display:none!important}
  .top,.sheet,.footwrap{background:#fff!important;box-shadow:none}
  .top::after,.top::before{display:none}
  .top{color:#1A1817}
  .nav{border-bottom-color:rgba(26,24,23,.2)}
  .mark,.mark .nm{color:#1A1817}
  .mark .lk img{filter:invert(1)}
  .mark .rule{background:rgba(26,24,23,.3)}
  .masthead h1{color:#1A1817}
  .masthead .stand,.masthead .lede{color:#423D39}
  .byline{color:#6E6862;border-top-color:rgba(26,24,23,.2)}
  .byline b{color:#1A1817}
  footer{color:#6E6862;border-top:1px solid rgba(26,24,23,.2)}
  .footmark img{filter:invert(1)}
  .fnm{color:#1A1817}
  .frule{background:rgba(26,24,23,.3)}
  .fgrid{border-bottom-color:rgba(26,24,23,.12)}
  .fgrid h3,.fgrid h4,.fgrid .h4{color:#1A1817}
  .fgrid a,.fends a,.note,.fends .reg,.fhrs{color:#6E6862}
  .fmap{color:#6E4630}
  a{text-decoration:none}
}

/* The intake widget is chrome too: never on the printed page. */
@media print{.k-b,.k-p{display:none!important}}

/* The footer listed seven fixed-fee services at the same weight as the firm
   itself, which reads as a practice that mainly sells packaged corporate
   products. The heading is now Services and this column is a size quieter.
   The links stay: three of those pages have no inbound link anywhere on the
   site except this column and /fixed-fees, so dropping them would take them
   out of the link graph to fix an impression. */
.fgrid .fsvc a{font-size:14px}
.fgrid .fsvc li{margin-bottom:7px}

/* A row of jumps to a long page's own sections. Deliberately plain: a label,
   then the headings, wrapping. No box, no numbers, no icons. It exists because
   101 pages of more than 1,200 words carried five or more headings and no
   wayfinding of any kind, which on a phone leaves the one section the reader
   wanted somewhere inside a wall of text. Written by tools/build-jumps.py. */
.jumps{display:flex;flex-wrap:wrap;gap:9px;
  margin:0 0 var(--s6);padding:20px 0 22px;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  counter-reset:jmp}
.jumps > span{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);
  flex:0 0 100%;margin:0 0 7px}
.jumps a{counter-increment:jmp;display:inline-flex;align-items:baseline;gap:10px;
  max-width:100%;font-family:var(--sans);font-size:13.5px;line-height:1.45;
  color:var(--body);text-decoration:none;padding:10px 15px;
  border:1px solid var(--line);border-radius:var(--r);background:transparent;
  transition:color .22s ease,border-color .22s ease,background .22s ease,
    transform .22s ease,box-shadow .22s ease}
.jumps a::before{content:counter(jmp,decimal-leading-zero);flex:none;
  font-family:var(--serif);font-size:11.5px;color:var(--accent)}
.jumps a:hover{color:var(--ink);border-color:rgba(140,79,48,.4);
  background:rgba(140,79,48,.05);transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(26,24,23,.07)}
.jumps a:active{transform:none;box-shadow:0 2px 7px rgba(26,24,23,.06)}
.jumps a:focus-visible{border-radius:var(--r)}
/* The row is navigation for what comes next, so it should sit closer to that
   than to what precedes it. Measured across the 99 pages that carry one: where
   the next thing is a .two or a heading the gap is 56px and reads correctly,
   but where it is a <section> the section brings its own 102px of padding on
   top of this margin and the row is left stranded above a void. Dropping the
   margin in that case alone brings 133px down to 77px, next to the 56px the
   other shape already had. */
.jumps:has(+ section){margin-bottom:0}
@media(max-width:640px){.jumps{gap:8px;padding:18px 0 20px}.jumps a{font-size:14px;padding:13px 14px;line-height:1.4}}

/* Measured on 25 August 2026: section padding on a 390px phone came out at
   0.74 of the same padding on a 1440px desktop. That is backwards. The
   spacing scale is clamp(64px,6vw,96px), so a wide screen takes the 6vw and
   a phone falls to the floor, and the phone is the screen where a paragraph
   runs to forty characters a line and needs the gap most to tell one section
   from the next.

   Raising the floor only under the phone breakpoint, rather than raising the
   clamp minimum, leaves every other width exactly as it was. */
@media(max-width:640px){:root{--s6:56px;--s7:80px;--s8:96px}}

/* A FAQ list needs air around its label.

   The section that introduces one is written as <section style="padding-top:0">,
   which is this site's idiom for a block that continues the one above it, and
   988 sections use it correctly: "Who leads this work" really does continue the
   page it follows. A FAQ does not continue anything. It is a new section, and
   with no top padding its eyebrow label sat 27 pixels under the edge of the
   block above and 22 pixels over the first question, which on a phone reads as
   cramped rather than as a beginning.

   Overriding an inline style needs !important, and that is the narrower change
   of the two available: the alternative is editing the same attribute in 91
   files and relying on whoever writes the next FAQ to remember. The selector is
   exact, an eyebrow label followed by a container whose own children are the
   questions, so no other section moves. */
section:has(> p.label + div > details){padding-top:var(--s6)!important}
p.label:has(+ div > details){margin-bottom:30px}
@media(max-width:640px){p.label:has(+ div > details){margin-bottom:26px}}

/* A fact under an eyebrow, as against a row of chips.

   .areas is a flex row: an uppercase label, then links styled as pills. That
   is right for "Instructed on" and for "Writing", where every child really is
   a destination. It was also being used for two things that are prose, and
   flex does to prose what flex does: "Qualifications" put its label inline
   with a four-credential run that wrapped over five lines, and "The matters"
   turned an inline link into a pill in the middle of a sentence and left the
   full stop behind it as a flex item of its own, floating after the pill.

   So prose gets its own component. The label sits above as an eyebrow, the
   value reads as a sentence, and a link inside it is a link. */
.fact{margin-top:24px}
.fact .k{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:0 0 9px}
.fact p{margin:0;font-size:15.5px;line-height:1.62;color:var(--body);max-width:58ch}
.fact p a{color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(140,79,48,.34);padding-bottom:1px;
  transition:border-color .2s ease}
.fact p a:hover{border-bottom-color:var(--accent)}
.creds{margin:0;padding:0;list-style:none;max-width:58ch}
.creds li{position:relative;padding-left:20px;margin:0 0 7px;
  font-size:15.5px;line-height:1.55;color:var(--body)}
.creds li:last-child{margin-bottom:0}
/* the same hairline the eyebrow labels use, at the scale of a list marker */
.creds li::before{content:"";position:absolute;left:0;top:.66em;
  width:9px;height:1px;background:var(--accent)}

/* "More on this": a row each, not a sentence.

   The strip was a comma separated list of article titles, and on a phone four
   of them ran together into seven lines of underlined text with no visible
   boundary between one title and the next. The separator could not do its job
   because article titles carry their own commas and colons: "When an AI System
   Causes Loss: Liability, Data Protection and Contracts" contains both.

   It was also styled on only some of the site. 264 pages had no .rel rule at
   all, so the strip inherited 17px body text and the default underline, which
   is where the wall came from; the other 163 had it at 15px in the muted grey.

   Hairline separated rows, with the arrow that .endlinks already uses and the
   same nudge on hover, so the boundary is the row itself. */
/* Scoped to nav.rel, which is what build-siblings.py writes. There are 171
   hand written <p class="rel"> lines elsewhere on the site, prose with inline
   links in it, and styling every .rel as a list turned each of those links
   into a full width row: "All our writing is on the / writing index / .
   Related: / Property / and / ..." one line at a time. The generated strip and
   a sentence are different things and only the strip is a list. */
nav.rel{margin-top:var(--s6);border-top:1px solid var(--line)}
nav.rel .k{font-family:var(--sans);font-size:10.5px;font-weight:500;
  text-transform:uppercase;letter-spacing:.18em;color:var(--mute);margin:20px 0 0}
nav.rel ul{list-style:none;margin:0;padding:0}
nav.rel li{border-bottom:1px solid var(--hair)}
nav.rel li:last-child{border-bottom:0}
nav.rel a{display:flex;gap:18px;align-items:baseline;justify-content:space-between;
  padding:15px 0;text-decoration:none;color:var(--body);
  font-size:16px;line-height:1.45;transition:color .2s ease}
nav.rel a span{flex:none;color:var(--accent);transition:transform .2s ease}
nav.rel a:hover{color:var(--accent)}
nav.rel a:hover span{transform:translateX(3px)}
@media(max-width:640px){nav.rel a{font-size:15.5px;padding:14px 0}}
/* the prose line these rules used to share, put back as it was */
p.rel{margin-top:26px;font-size:15px;color:var(--mute)}
p.rel a{color:var(--accent)}

/* A partner profile is not a continuation of the page above it.

   .person sits inside <main style="padding-top:var(--s7)"> on each partner's
   own page, which gives it 102px of air. On the team page and its Greek twin
   the same block sits inside <section style="padding-top:0">, the site's
   continuation idiom, and the measured gap between the intro heading and the
   top of the portrait was zero: the photograph began exactly where the
   sentence above it ended. Four sections across the two files. */
section:has(> .person){padding-top:var(--s7)!important}

/* The location line beside the page label.

   It carried no colour of its own, so it inherited --onDarkMute, which is
   .6 alpha. Composited on the masthead ink that is #9C9B9C, 6.39:1, and next
   to "ABOUT" in --accent-lt it reads as hazy rather than quiet: the two are
   the same size and tracking and should be peers.

   Matching the accent's contrast exactly would mean .65, and that is the
   wrong answer, because a warm mid tone carries presence a neutral grey does
   not and the label would still look washed. .8 gives #C7C7C8 at 10.47:1,
   clearly a peer, still short of the full white the headline uses.

   Set on .mmeta rather than on --onDarkMute, which is shared with the
   consultation block's body text and should not move. */
/* The location line beside the page label.

   It was written as .mmeta, which is 0,1,0, and .masthead p is 0,1,1, so on
   every page with a masthead none of it applied: not the absolute position in
   the corner, not the 11px, not the tracking, not the colour. It was rendering
   as an ordinary masthead paragraph at 16.64px in --onDarkMute, which is why
   it looked washed and why it sat in the flow rather than in the corner.

   Raised to .masthead .mmeta, 0,2,0, which wins. The colour goes to .8 at the
   same time: composited on the masthead ink that is #C7C7C8 at 10.47:1, so it
   reads as a peer of the page label beside it. Matching the accent's contrast
   exactly would be .65, and that is the wrong answer, because a warm mid tone
   carries presence a neutral grey does not. */
.masthead .mmeta{position:absolute;right:clamp(20px,4vw,56px);top:calc(var(--s8) + 6px);
  font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(242,243,244,.8);display:flex;align-items:center;gap:12px;margin:0;max-width:none}