/* The hub. Phancao & Shaffer, LLP, five-direction round, 2026-09-13.
   The single page the founders land on. One serif (EB Garamond, SIL OFL 1.1, self-hosted, the same
   files as Direction 5). Stone ground, ink, and the gold from their own logo. Gold is never text on a
   light ground: here it is only ever a rule, a fill, or the ampersand from their own mark. */

@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-latin-ext-400-normal.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;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-latin-400-italic.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400 800;font-display:swap;src:url('fonts/eb-garamond-latin-ext-400-italic.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;}

:root{
  --stone:#F2EEE6;
  --stone-2:#E8E2D6;
  --line:#D6CDBE;
  --ink:#10283B;
  --navy:#0D476C;
  --body:#2F3D49;
  --muted:#55606B;
  --gold:#EFD038;
  --deep:#0F2A3F;
  --on-deep:#EDE7DA;
  --on-deep-muted:#B8C2CB;
  --serif:'EB Garamond',Garamond,'Times New Roman',Times,serif;
  --max:1040px;
  --gutter:clamp(20px,4vw,48px);
  --bar:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--stone);color:var(--body);font-family:var(--serif);font-size:19px;line-height:1.55;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:500;color:var(--ink);margin:0;line-height:1.12;letter-spacing:-.005em}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--gold);text-decoration-thickness:1.5px;text-underline-offset:.22em;transition:text-decoration-color .2s,color .2s}
a:hover{color:var(--ink);text-decoration-color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.skip{position:absolute;left:-9999px;top:0;background:var(--deep);color:var(--on-deep);padding:10px 14px;z-index:20}
.skip:focus{left:var(--gutter)}
.caps{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500}

/* Top. There is no navigation. A logo, and one line saying what this is. */
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--bar);gap:24px}
.top .brand{display:flex;align-items:center;text-decoration:none}
.top .brand img{height:30px;width:auto}
.top .study{color:var(--muted);text-decoration:none;white-space:nowrap}
.top a.study:hover{color:var(--ink)}

/* The cover. Their ampersand, then the title, then a letter. */
.cover{padding:clamp(56px,9vw,124px) 0 clamp(36px,4.5vw,56px)}
.amp-orn{display:block;width:36px;height:23px;color:var(--gold);margin-bottom:28px}
.cover h1{font-size:clamp(38px,4.8vw,62px);max-width:11.5em;font-weight:500}
.cover .for{color:var(--muted);margin:18px 0 0}
.letter{max-width:33em;margin-top:clamp(30px,3.6vw,46px);font-size:clamp(19px,1.55vw,21px);line-height:1.5}
.letter .salute{color:var(--ink)}
.letter .sign{margin-top:1.4em;color:var(--ink)}

/* The five doors. A table of contents, not a grid and not cards. The mark on the left is the
   firm's own ampersand: press it and the door is a favorite; the page remembers in this browser. */
.doors-head{margin-top:clamp(44px,6vw,80px);color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--ink)}
.doors{list-style:none;margin:0;padding:0}
.door{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:24px;align-items:start;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.door h2{font-size:clamp(27px,2.8vw,36px);line-height:1.15}
.door h2 a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold);transition:border-color .2s}
.door h2 a:hover{border-bottom-color:var(--ink)}
.door .was{color:var(--muted);margin:10px 0 12px}
.door .line{max-width:36em;margin:0}
.door .go{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;margin-top:14px;font-size:16.5px}
.door .go .url{color:var(--muted)}
.door .liked{display:none;color:var(--ink)}
.door.is-liked .liked{display:inline}
.mark{appearance:none;-webkit-appearance:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;padding:0;margin:3px 0 0;cursor:pointer;display:grid;place-items:center;transition:background .2s,border-color .2s}
.mark svg{width:24px;height:15px;color:var(--ink);opacity:0;transition:opacity .2s}
.mark:hover{border-color:var(--navy);background:rgba(239,208,56,.25)}
.mark[aria-pressed="true"]{background:var(--gold);border-color:var(--gold)}
.mark[aria-pressed="true"] svg{opacity:1}
.summary{margin-top:26px;color:var(--ink);font-size:18px}
.remember{margin-top:10px;color:var(--muted);font-size:16px}

/* Two things to keep. A quieter band. */
.more{background:var(--stone-2);padding:clamp(48px,6vw,84px) 0;margin-top:clamp(44px,6vw,80px)}
.more h2{color:var(--ink);padding-bottom:14px;border-bottom:1px solid var(--ink);margin-bottom:30px}
.keep{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 48px;margin:0;padding:0;list-style:none}
.keep h3{font-size:clamp(23px,2.2vw,27px);line-height:1.2}
.keep h3 a{color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold);transition:border-color .2s}
.keep h3 a:hover{border-bottom-color:var(--ink)}
.keep p{margin:12px 0 0;max-width:30em}
.keep .note{color:var(--muted);font-size:16.5px}

/* Closing */
.closing{padding:clamp(44px,6vw,80px) 0 clamp(52px,7vw,96px)}
.closing p{max-width:33em;font-size:clamp(19px,1.55vw,21px);line-height:1.5}
.closing .sign{color:var(--ink);margin-top:1.4em}

/* Footer, on the deep ground, with the wordmark set in type and their ampersand in gold. */
.foot{background:var(--deep);color:var(--on-deep-muted);padding:40px 0 46px;font-size:15.5px;line-height:1.5}
.foot .wordmark{color:var(--on-deep);font-size:21px;line-height:1.2}
.foot .amp{display:inline-block;width:19px;height:12px;color:var(--gold);vertical-align:-1px;margin:0 1px}
.foot .trading{color:var(--on-deep-muted);margin:4px 0 0}
.foot .fine{margin-top:22px;max-width:44em}
.foot a{color:var(--on-deep);text-decoration-color:var(--gold)}

/* The two documents. A single measure, their words, nothing decorative. */
.doc{max-width:41em;margin:0 auto;padding:clamp(40px,6vw,72px) var(--gutter) clamp(56px,8vw,104px)}
.doc h1{font-size:clamp(34px,4.2vw,52px);margin-bottom:.45em;max-width:14em}
.doc h2{font-size:clamp(25px,2.5vw,32px);margin:1.9em 0 .6em}
.doc h3{font-size:22px;margin:1.6em 0 .5em}
.doc h2 + h3{margin-top:.6em}
.doc p{margin:0 0 1.05em}
.doc hr{border:0;width:44px;height:2px;background:var(--gold);margin:2.4em 0}
.doc blockquote{margin:1.25em 0;padding:2px 0 2px 22px;border-left:2px solid var(--gold);color:var(--ink)}
.doc blockquote p{margin-bottom:.8em}
.doc ul{padding-left:1.2em;margin:0 0 1.05em}
.doc li{margin:.4em 0}
.doc li p{margin:0}
.doc .tbl{overflow-x:auto;margin:1.2em 0}
.doc table{border-collapse:collapse;width:100%;font-size:17.5px;line-height:1.4}
.doc th,.doc td{text-align:left;vertical-align:top;padding:9px 14px 10px 0;border-bottom:1px solid var(--line)}
.doc th{font-weight:500;color:var(--ink);border-bottom-color:var(--ink)}
.doc code{font-family:inherit;font-size:.95em;background:var(--stone-2);padding:0 .3em;overflow-wrap:anywhere}
.doc em{font-style:italic}
.doc strong{font-weight:600;color:var(--ink)}
.doc .back{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--line);font-size:17px}

/* Not here */
.lost{padding:clamp(72px,12vw,160px) 0 clamp(64px,10vw,128px)}
.lost h1{font-size:clamp(34px,4.2vw,52px);max-width:14em}
.lost p{max-width:31em;margin-top:1em;font-size:clamp(19px,1.55vw,21px)}

@media (max-width:680px){
  body{font-size:18px}
  .top .brand img{height:26px}
  .top .study{display:none}
  .door{grid-template-columns:38px minmax(0,1fr);column-gap:16px;padding:26px 0 28px}
  .mark{width:38px;height:38px}
  .mark svg{width:20px;height:13px}
  .keep{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important}
}