/* brentleffew.com — shared foundation (v1 · "Signage": DIN + mint)
   Tokens first, then base elements, then reusable patterns.
   Pages link this file and add only page-specific rules. */

/* fonts — Barlow and Barlow Condensed (SIL OFL 1.1), served from jsDelivr */
@font-face{font-family:Barlow;font-weight:400;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/files/barlow-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:500;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/files/barlow-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Barlow;font-weight:600;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/files/barlow-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/barlow-condensed@5.3.0/files/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(https://cdn.jsdelivr.net/npm/@fontsource/barlow-condensed@5.3.0/files/barlow-condensed-latin-700-normal.woff2) format("woff2")}

:root{
  /* color */
  --bg:#d9efe3; --fg:#2d1f17; --muted:#5e4a3d; --rule:#9cc4b0; --surface:#cde8d9;
  /* type — DIN, set in Barlow (a free DIN-model face) until a licensed DIN is added */
  --font:"DIN 2014",Barlow,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-cond:"DIN 2014 Narrow","Barlow Condensed","DIN Condensed","Arial Narrow",sans-serif;
  --text-xs:15px; --text-sm:15px; --text-md:16px; --text-base:18px; --text-link:24px;
  --display:clamp(72px,18vw,128px); --title:clamp(48px,11vw,80px);
  /* space */
  --s1:2px; --s2:8px; --s3:16px; --s4:20px; --s5:32px; --s6:48px; --s7:64px;
  /* layout */
  --measure:640px; --bar:6px; --radius:6px;
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#2d1f17; --fg:#d9efe3; --muted:#9fc2b0; --rule:#52402f; --surface:#382920; }
}

*{box-sizing:border-box;margin:0}
html,body{min-height:100%}
body{background:var(--bg);color:var(--fg);font:400 var(--text-base)/1.5 var(--font);padding:24px;-webkit-font-smoothing:antialiased}

/* layouts */
.page{max-width:var(--measure);margin:0 auto;width:100%}
.page--center{min-height:calc(100vh - 48px);display:flex;flex-direction:column;justify-content:center;padding:var(--s6) 0}
.page--top{padding-top:var(--s6);padding-bottom:var(--s7)}

/* the signature: a heavy bar with condensed caps across the top of every page */
.topbar{border-top:var(--bar) solid var(--fg);padding-top:var(--s4);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s3);white-space:nowrap;font:600 15px/1.2 var(--font-cond);letter-spacing:.12em;text-transform:uppercase}
.topbar a{font-weight:600;color:var(--fg);border-bottom:0;padding:0}
.topbar a:hover{border-bottom:1px solid var(--fg)}
.topbar .sep{margin:0 var(--s2);color:var(--muted)}

/* type */
h1{font:700 var(--display)/.86 var(--font-cond);text-transform:uppercase;letter-spacing:-.005em;margin-top:28px}
h1.title{font-size:var(--title);line-height:.9}
h2{font:600 15px/1.2 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--fg)}
p{color:var(--muted);max-width:32em}
.lede{margin-top:var(--s4)}
small,.label{font:600 15px/1.2 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
hr{border:0;border-top:1px solid var(--rule);margin:var(--s6) 0 var(--s3)}

/* links */
a{color:var(--fg);text-decoration:none;font-weight:600;border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .2s}
a:hover,a:focus-visible{border-color:var(--fg)}
a:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.arrow{display:inline-block;font-size:var(--text-xs);font-weight:600;transition:transform .2s}
a:hover .arrow{transform:translate(2px,-2px)}
small a{color:var(--muted);font-weight:600}

/* index: numbered rows on hairlines (homepage links) */
.index{list-style:none;padding:0;margin-top:var(--s6)}
.index li{border-top:1px solid var(--rule)}
.index li:last-child{border-bottom:1px solid var(--rule)}
.index a{display:flex;gap:var(--s4);align-items:baseline;padding:var(--s3) 0;border-bottom:0}
.index .num{width:24px;flex:none;font:600 15px/1 var(--font-cond);letter-spacing:.1em;color:var(--fg)}
.index .body{display:flex;flex-direction:column;gap:var(--s1)}
.index .name{font-size:var(--text-link);line-height:1.1;font-weight:600}
.index .desc{font-size:var(--text-xs);line-height:1.3;font-weight:400;color:var(--muted)}
.index a:hover .name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}

/* simple stacked links (inside cards) */
.links{list-style:none;padding:0;margin-top:var(--s3);display:grid;gap:var(--s2)}
.links p{margin-top:var(--s1);font-size:var(--text-md)}

/* sections and cards */
.section{margin-top:var(--s7)}
.section > h2{margin-bottom:var(--s3)}

.card{border-top:1px solid var(--rule);padding:var(--s4) 0 var(--s5)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.card-head h3{font-size:var(--text-link);line-height:1.1;font-weight:600;letter-spacing:-.005em}
.card p{margin-top:var(--s2);font-size:var(--text-md);max-width:none}
.tag{font:600 13px/1.2 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);border:1px solid var(--rule);border-radius:40px;padding:3px 10px}
.tag--live{color:var(--fg);border-color:var(--fg)}
.note,.card .note{margin-top:var(--s3);font-size:var(--text-sm)}
.note b{color:var(--fg);font-weight:600}
.specimen{margin-top:var(--s3);background:#fdf9f3;border:1px solid var(--rule);padding:var(--s6) var(--s5);display:flex;justify-content:center}
.specimen img{display:block;width:100%;max-width:440px;height:auto}
.links--row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3) 0}
.links--row li + li{border-left:1px solid var(--rule);margin-left:var(--s5);padding-left:var(--s5)}

/* preview tiles: live, scaled-down prototype previews in a grid */
.page--wide{max-width:960px}
.page--wide .lede{max-width:32em}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s5);border-top:1px solid var(--rule);padding-top:var(--s5)}
.tile--wide{grid-column:1 / -1}
.tile-previews{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:var(--s4)}
.preview{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--surface);border:1px solid var(--rule);padding:0;transition:border-color .2s,transform .2s}
.preview:hover,.preview:focus-visible{border-color:var(--fg);transform:translateY(-2px)}
.preview iframe{position:absolute;top:0;left:0;width:1280px;height:800px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.chip{position:absolute;left:var(--s3);bottom:var(--s3);background:var(--fg);color:var(--bg);font:600 13px/1 var(--font-cond);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:40px}
.tile .card-head{margin-top:var(--s4)}
.tile p{margin-top:var(--s2);font-size:var(--text-md)}
@media (max-width:720px){.tiles{grid-template-columns:1fr}.tile-previews{grid-template-columns:1fr}}

/* page theme: Pawtrait (cream + tan from the PAWTRAIT.love brand, brown ink kept) */
.theme-pawtrait{--bg:#fdf9f3;--surface:#f4ece0;--fg:#2d1f17;--muted:#6b5a4c;--rule:#e0d0b8;--accent:#c49a63}
@media (prefers-color-scheme:dark){.theme-pawtrait{--bg:#2d1f17;--surface:#382920;--fg:#fdf9f3;--muted:#cbb89c;--rule:#4d3b2f;--accent:#e0b680}}
.theme-pawtrait .topbar{border-top-color:var(--accent)}
.theme-pawtrait .specimen{background:#fdf9f3;border-color:var(--rule)}
.theme-pawtrait .chip{background:#2d1f17;color:#fdf9f3}
.brand-logo{margin-top:var(--s5);line-height:0}
.brand-logo img{display:block;width:100%;max-width:520px;height:auto;margin:calc(min(520px,100%) * -0.0536) 0 calc(min(520px,100%) * -0.0242) calc(min(520px,100%) * -0.0673)}
@media (prefers-color-scheme:dark){.brand-logo img{filter:brightness(0) invert(.97) sepia(.15)}}