/* Pidgeon website — drafting-sheet look: mylar paper, blue-black ink, teal process line, redline markup */
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --paper:#F5F7F6;      /* drafting film */
  --sheet:#FFFFFF;
  --ink:#172331;        /* blue-black drawing ink */
  --mute:#566672;
  --rule:#C9D2D0;
  --grid:#E3E8E6;
  --line:#0F766E;       /* process line / action */
  --line-dark:#0B5B55;
  --red:#C81E1E;        /* redline markup */
  --cond:"Barlow Condensed","Arial Narrow",sans-serif;
  --body:Barlow,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.55 var(--body)}
img,svg{max-width:100%}
a{color:var(--line-dark);text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:12px;background:var(--sheet);padding:6px 10px;z-index:10}

/* The page is a drawing sheet: border with zone references */
.frame{position:relative;max-width:1240px;margin:28px auto;background:var(--sheet);border:1.5px solid var(--ink);box-shadow:0 0 0 6px var(--sheet),0 0 0 7px var(--rule)}
.zones-x,.zones-y{position:absolute;display:flex;color:var(--mute);font:500 11px/1 var(--cond);pointer-events:none}
.zones-x{left:0;right:0;top:-22px;justify-content:space-around}
.zones-y{top:0;bottom:0;left:-22px;flex-direction:column;justify-content:space-around}
.wrap{padding:0 clamp(20px,4vw,56px)}

header.top{display:flex;align-items:center;gap:20px;padding:18px clamp(20px,4vw,56px);border-bottom:1px solid var(--rule)}
.brand{display:flex;align-items:center;gap:10px;font:700 26px/1 var(--cond);color:var(--ink);text-decoration:none;letter-spacing:.2px}
.brand svg{width:30px;height:30px}
nav.links{margin-left:auto;display:flex;align-items:center;gap:22px;font-weight:500}
nav.links a{color:var(--ink);text-decoration:none}
nav.links a:hover{text-decoration:underline}
.btn{display:inline-block;padding:11px 18px;border:1.5px solid var(--ink);border-radius:3px;font:600 17px/1 var(--body);text-decoration:none;color:var(--ink);background:var(--sheet)}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn.go{background:var(--line);border-color:var(--line);color:#fff}
.btn.go:hover{background:var(--line-dark);border-color:var(--line-dark);color:#fff}
nav.links .btn{padding:9px 14px;font-size:15px}

h1,h2,h3{font-family:var(--cond);font-weight:700;line-height:1.05;margin:0;letter-spacing:.1px}
h1{font-size:clamp(42px,5.2vw,66px);max-width:12ch}
h2{font-size:clamp(32px,3.6vw,44px);max-width:20ch}
h3{font-size:26px;font-weight:600}
p{margin:0 0 1em;max-width:66ch}
.lede{font-size:20px;color:#2b3947;max-width:38ch}
.small{font-size:15px;color:var(--mute)}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(300px,4fr) 7fr;gap:clamp(24px,4vw,48px);align-items:center;padding:clamp(36px,6vw,72px) clamp(20px,4vw,56px)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 14px}
.hero h1{margin-bottom:20px}
.drawing{position:relative;border:1px solid var(--rule);background:#fff}
.drawing img{display:block;width:100%;height:auto}
.drawing svg.markup{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.markup .cloud{fill:none;stroke:var(--red);stroke-width:3;stroke-linejoin:round}
.markup .lead{fill:none;stroke:var(--red);stroke-width:2}
.markup text{fill:var(--red);font:italic 600 27px var(--cond)}
.markup .tri{fill:var(--red)}
@media (prefers-reduced-motion:no-preference){
  .markup .cloud,.markup .lead{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s ease-out forwards}
  .markup .n2 .cloud,.markup .n2 .lead{animation-delay:.55s}
  .markup .n3 .cloud,.markup .n3 .lead{animation-delay:1.1s}
  .markup text,.markup .tri{opacity:0;animation:show .4s ease-out forwards;animation-delay:.7s}
  .markup .n2 text,.markup .n2 .tri{animation-delay:1.25s}
  .markup .n3 text,.markup .n3 .tri{animation-delay:1.8s}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes show{to{opacity:1}}

/* Sections are separated like drawing zones by a single ink rule */
section{padding:clamp(44px,6vw,80px) clamp(20px,4vw,56px);border-top:1px solid var(--rule)}
section > h2{margin-bottom:14px}
section > p.intro{color:#2b3947;margin-bottom:34px}

.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.kind figure{margin:0 0 16px;border:1px solid var(--rule);background:#fff;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;overflow:hidden}
.kind figure img{width:100%;height:100%;object-fit:contain;padding:8px}
.kind h3{margin-bottom:8px}
.kind p{font-size:16px}
.kind a.open{font-weight:600}

table.outputs{width:100%;border-collapse:collapse;font-size:16px}
.outputs th,.outputs td{text-align:left;vertical-align:top;padding:14px 16px 14px 0;border-top:1px solid var(--rule)}
.outputs th{font:600 22px/1.1 var(--cond);width:150px;white-space:nowrap}
.outputs tr:last-child td,.outputs tr:last-child th{border-bottom:1px solid var(--rule)}
.outputs td p{margin:0}

.split h2{margin-bottom:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:start}
.split ul{margin:0;padding-left:20px}
.split li{margin:0 0 8px;max-width:58ch}

.note{border:2px solid var(--red);padding:16px 20px;color:#3a1515;background:#fff;max-width:72ch}
.note strong{color:var(--red)}

details{border-top:1px solid var(--rule);padding:16px 0;max-width:80ch}
details:last-of-type{border-bottom:1px solid var(--rule)}
summary{cursor:pointer;font:600 22px/1.2 var(--cond);list-style:none;display:flex;gap:12px;align-items:baseline}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--line);font-weight:700;width:14px;flex:none}
details[open] summary::before{content:"−"}
details p{margin:10px 0 0 26px}

/* Footer = title block */
footer.titleblock{display:grid;grid-template-columns:2fr 1.3fr .8fr 1.6fr 1fr;border-top:1.5px solid var(--ink)}
.titleblock > div{padding:12px 16px;border-left:1px solid var(--rule);min-height:72px}
.titleblock > div:first-child{border-left:none}
.titleblock .k{display:block;font-size:13px;color:var(--mute);margin-bottom:4px}
.titleblock .v{font:600 20px/1.2 var(--cond)}
.titleblock .wide{grid-column:1/-1;border-left:none;border-top:1px solid var(--rule);font-size:14px;color:var(--mute);min-height:0}

/* Guide */
.guide{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:clamp(36px,5vw,64px) clamp(20px,4vw,56px)}
.guide nav.toc{position:sticky;top:20px;align-self:start;font-size:15px}
.guide nav.toc a{display:block;padding:5px 0;color:var(--ink);text-decoration:none}
.guide nav.toc a:hover{color:var(--line-dark);text-decoration:underline}
.guide article h1{font-size:clamp(40px,5vw,60px);margin-bottom:18px}
.guide article h2{max-width:none;font-size:34px;margin:52px 0 12px;padding-top:18px;border-top:1px solid var(--rule)}
.guide article h3{font-size:22px;margin:26px 0 8px}
.guide article ul,.guide article ol{padding-left:22px;max-width:66ch}
.guide article li{margin-bottom:6px}
kbd{font:500 14px var(--body);border:1px solid var(--rule);border-bottom-width:2px;border-radius:3px;padding:0 5px;background:var(--paper)}
code{font-size:15px;background:var(--paper);border:1px solid var(--grid);padding:0 4px;border-radius:2px}
.guide table{border-collapse:collapse;font-size:16px;margin:8px 0 16px}
.guide td,.guide th{border-top:1px solid var(--rule);padding:8px 18px 8px 0;text-align:left;vertical-align:top}

@media (max-width:980px){
  .frame{margin:0;border-left:none;border-right:none;box-shadow:none}
  .zones-x,.zones-y{display:none}
  .hero{grid-template-columns:1fr}
  .kinds{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .guide{grid-template-columns:1fr}
  .guide nav.toc{position:static;columns:2}
  footer.titleblock{grid-template-columns:1fr 1fr}
  .titleblock > div:nth-child(3){border-left:none}
  .titleblock > div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:560px){
  body{font-size:16px}
  nav.links a:not(.btn){display:none}
  .outputs th{width:auto;display:block;border-bottom:none;padding-bottom:0}
  .outputs td{display:block;border-top:none;padding-top:4px}
  footer.titleblock{grid-template-columns:1fr}
  .titleblock > div{border-left:none;border-top:1px solid var(--rule)}
}