/* sabalforge.com site-public. Fluid from 320px. No device breakpoints:
   layout steps are container queries in rem, set where content fits (Scher, responsive refs). */
@font-face{font-family:"Inter";font-weight:400;font-display:swap;src:url(/assets/fonts/inter-3-latin.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:700;font-display:swap;src:url(/assets/fonts/inter-0-latin.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-weight:400;font-display:swap;src:url(/assets/fonts/SourceSerif4-Regular-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Regular-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/assets/fonts/IBMPlexMono-Medium-latin.woff2) format("woff2")}

:root{--ink:#0A0A0A;--paper:#F5F5F5;--line:#D4D4D4;--ember:#B87333;--link:#9C5E28;--sec:#525252;--muted:#6B6B6B;--m:clamp(1rem,5.556vw,5rem);--tap:44px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-size:1rem;line-height:1.5;overflow-wrap:break-word}
h1,h2,p,ul,ol{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--m);top:-100px;background:var(--ink);color:var(--paper);padding:0 1rem;min-height:var(--tap);display:inline-flex;align-items:center;z-index:10}
.skip:focus{top:8px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:.8125rem;letter-spacing:.02em}
.serif{font-family:"Source Serif 4",Georgia,serif}
.ember-500{color:var(--ember)}
.link{color:var(--link);text-decoration:underline;text-underline-offset:3px}
.lnk{display:inline-flex;align-items:center;min-height:var(--tap)}
.shell{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.shell>main{flex:1 0 auto}

/* header: logo + Log in on row 1, nav wraps under when narrow; Log in stays upper right */
.hd{container-type:inline-size;margin:0 var(--m);border-bottom:1px solid var(--line)}
.hd-in{display:flex;flex-wrap:wrap;align-items:center;column-gap:1rem;padding:.75rem 0 .25rem}
.logo{order:1;display:inline-flex;min-height:var(--tap);min-width:var(--tap);align-items:center}
.logo img{height:40px;width:auto;display:block}
.login{order:2;margin-left:auto}
.links{order:3;flex-basis:100%;display:flex;flex-wrap:wrap;column-gap:1rem}
.links a,.links span,.hd-in .ghost{font-size:1rem}
.links a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.links a:hover{text-decoration:underline}
.links [aria-current]{font-weight:500}
.links .muted{color:var(--muted)}
@container (min-width:36rem){
  .hd-in{flex-wrap:nowrap;min-height:88px;padding:0;column-gap:1.75rem}
  .logo img{height:48px}
  .links{order:2;flex-basis:auto;margin-left:auto;column-gap:1.75rem;flex-wrap:nowrap}
  .links a{white-space:nowrap}
  .login{order:3}
  .links + .login{margin-left:0}
  .links a,.links span,.hd-in .ghost{font-size:.8125rem}
}
.ghost{border:1px solid #737373;border-radius:2px;padding:0 1rem;display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:500;background:transparent}
.ghost:hover{background:#fff}
.btn{background:var(--ember);color:var(--ink);font-weight:500;padding:0 1.125rem;border-radius:2px;display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none}
.btn:hover{background:#CC8D55}

/* hero */
.hero{margin:clamp(2.5rem,6.667vw,6rem) var(--m) 3rem;container-type:inline-size}
.rule{display:block;width:96px;height:3px;background:var(--ember)}
.h-land{font-weight:700;letter-spacing:-.035em;line-height:.98;font-size:clamp(2.5rem,12vw,6.5rem);font-size:clamp(2.5rem,11cqi,6.5rem);margin-top:2rem;max-width:16ch}
.subline{font-size:clamp(1.125rem,2.2vw,1.375rem);margin-top:1.75rem;max-width:37.5rem;line-height:1.45;color:var(--sec)}
.cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center}
.cta .mono{font-size:1rem}
@container (min-width:36rem){.cta .mono{font-size:.8125rem}}

/* tiles: 1 col, 2 when two fit, 5 (landing) / 4 (dashboard) when all fit */
.tiles{display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);border-left:1px solid var(--line);margin-top:3.5rem}
.tiles>li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:1rem;min-width:0;min-height:72px;display:flex;flex-direction:column;justify-content:space-between;gap:.25rem}
.tile-name{font-weight:500;font-size:.875rem}
@container (min-width:34rem){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.t5>li{min-height:128px}}
@container (min-width:56rem){.t5{grid-template-columns:repeat(5,minmax(0,1fr))}.t4{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* dashboard */
.tag{font-family:"IBM Plex Mono",ui-monospace,monospace;font-weight:500;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}
.sec{color:var(--sec)}
.tag.ember{color:var(--link)}
.dash-h{overflow-wrap:anywhere;font-weight:700;letter-spacing:-.035em;line-height:1.05;font-size:clamp(1.75rem,7vw,3rem);margin-top:.75rem}
.dash>li{min-height:160px}
.dash .t-name{font-weight:700;font-size:1.5rem;margin-top:.75rem}
.dash .blank{border-right:1px solid var(--line);background:var(--paper)}
.adm{background:var(--ink);margin-top:.75rem}
.adm>li{color:var(--paper);border-color:#404040;min-height:96px;justify-content:flex-start}
.adm .tag{color:#DDA97D}
.adm .t-name{font-weight:700;font-size:1.25rem;margin-top:.625rem}
.section-label{margin-top:2.5rem;line-height:1.5}
.note{font-size:.875rem;margin-top:.5rem}

/* footer */
.foot{margin:0 var(--m);border-top:1px solid var(--line);padding:1rem 0;color:var(--muted);min-height:var(--tap);display:flex;align-items:center}
.err{margin:4rem var(--m)}
.err p{margin-top:1rem}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}