/* ============================================================================
   MorphOS Software - site stylesheet
   Flat, faceted, low-poly. Palette and geometry are documented internally;
   see _archive/PALETTE.md (not deployed).
   ========================================================================== */
:root{
  /* --- the eight core colours (wing, bright -> deep) ------------------- */
  --ice:    #1FF9FC;   /* brightest wing highlight            */
  --cyan:   #02E9F4;   /* upper wing                          */
  --aqua:   #06D5F4;   /* inner wing                          */
  --body:   #03C5DE;   /* the dominant wing fill              */
  --teal:   #05AEC0;   /* shaded wing facet                   */
  --azure:  #03A5E6;   /* wing-root facet                     */
  --blue:   #0271CA;   /* deepest blue facet                  */
  --slate:  #3E505B;   /* the single grey facet               */
  /* --- the dark ground --------------------------------------------------- */
  --petrol: #02152F;   /* deep navy facet                     */
  --night:  #09111A;   /* wing drop shadow                    */
  --shadow: #0F1018;   /* antennae / body                     */
  --ink:    #030304;   /* darkest facet                       */
  --moss:   #0A4C46;   /* dark teal facet                     */
  --ember:  #220E13;   /* the one warm facet                 */

  --bg:      var(--night);
  --panel:   #0C1621;
  --panel-2: #101E2B;
  --line:    #1B3040;
  --text:    #D9EEF4;
  --muted:   #7FA0B0;
  --accent:  var(--body);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;color-scheme:dark}
[data-theme="light"]{color-scheme:light}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:"Roboto",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  line-height:1.65;-webkit-font-smoothing:antialiased;
}
a{color:var(--aqua);text-decoration:none}
/* .btn is excluded: a solid button sets its own label colour, and letting the
   generic link-hover rule reach it once made the text match its background. */
a:hover:not(.btn){color:var(--ice)}
img{display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}

/* --- facet primitives -------------------------------------------------- */
/* No curves, no gradients: every shape is a flat-filled triangle with a
   hard mitre. Cards and buttons inherit that cut corner. */
.cut     {clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.cut-sm  {clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}

/* ============================ header ==================================== */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(9,17,26,.92);
  border-bottom:1px solid var(--line);backdrop-filter:blur(6px);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;color:var(--text)}
.brand img{width:26px;height:27px;filter:drop-shadow(0 0 6px rgba(3,197,222,.55))}
.brand b{font-size:.95rem;white-space:nowrap}
.brand span{color:var(--body)}
nav.top{display:flex;gap:6px}
nav.top a{
  font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--muted);padding:8px 14px;border:1px solid transparent;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
nav.top a:hover{color:var(--ice);border-color:var(--line);background:var(--panel)}

/* ============================ hero ====================================== */
.hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:url("facets.svg") center/cover no-repeat, var(--night);
}
.hero:before{ /* accent wash across the mesh */
  content:"";position:absolute;inset:0;
  background:radial-gradient(700px 420px at 78% 12%,rgba(3,197,222,.30),transparent 70%),
             radial-gradient(560px 380px at 8% 95%,rgba(2,21,47,.85),transparent 70%);
}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;
  gap:40px;align-items:center;padding-top:76px;padding-bottom:76px}
.pill{
  display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ice);
  background:rgba(2,21,47,.75);border:1px solid rgba(31,249,252,.35);
  padding:7px 14px;margin-bottom:22px;
  clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,9px 100%,0 calc(100% - 9px));
}
.pill i{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;
  border-bottom:9px solid var(--ice)}
.hero h1{
  margin:0 0 16px;font-size:clamp(2.3rem,5vw,3.5rem);line-height:1.06;
  letter-spacing:-.025em;font-weight:800;color:#EAFBFF;
  text-shadow:0 2px 24px rgba(2,21,47,.9);
}
.hero h1 em{font-style:normal;color:var(--body)}
.hero .lead{margin:0 0 30px;font-size:1.1rem;color:#B4D3DF;max-width:46ch}
.hero-art{position:relative;display:flex;justify-content:center}
.hero-art img{
  width:min(340px,80%);height:auto;
  filter:drop-shadow(0 0 34px rgba(3,197,222,.5)) drop-shadow(0 18px 40px rgba(3,3,4,.7));
}
.stats{display:flex;gap:10px;flex-wrap:wrap}
.stats div{
  background:rgba(12,22,33,.82);border:1px solid var(--line);padding:12px 18px;text-align:center;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
}
.stats b{display:block;font-size:1.35rem;color:var(--ice);line-height:1.2}
.stats small{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* --- the facet strip: the palette laid out as a colour ruler --------- */
.facet-strip{display:flex;height:8px}
.facet-strip span{flex:1}

/* ============================ projects ================================== */
section.projects{padding:74px 0 84px}
.head{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.head h2{margin:0;font-size:1.9rem;letter-spacing:-.02em;color:#EAFBFF}
.head .tri{width:0;height:0;border-left:8px solid transparent;border-right:8px solid transparent;
  border-bottom:14px solid var(--body)}
.sub{margin:0 0 34px;color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}
.card{
  position:relative;display:flex;flex-direction:column;gap:9px;
  background:var(--panel);border:1px solid var(--line);padding:26px 26px 24px;
  transition:background .16s,border-color .16s,transform .16s;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px));
}
.card:after{ /* the mitre, filled like a facet */
  content:"";position:absolute;top:0;right:0;width:20px;height:20px;
  background:var(--body);clip-path:polygon(100% 0,100% 100%,0 0);
  transition:background .16s;
}
.card:hover{background:var(--panel-2);border-color:#26485E;transform:translateY(-3px)}
.card:hover:after{background:var(--ice)}
.chip{
  align-self:flex-start;font-size:.64rem;font-weight:700;letter-spacing:.17em;
  text-transform:uppercase;color:var(--night);background:var(--teal);padding:4px 9px;
}
.card h3{margin:2px 0 0;font-size:1.32rem;color:#EAFBFF;letter-spacing:-.01em}
.card p{margin:0;color:#9DBECC;flex:1}
.card .more{font-size:.74rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--aqua)}
.card:hover .more{color:var(--ice)}

/* ============================ palette note ============================== */
.origin{
  margin:70px 0 0;background:var(--panel);border:1px solid var(--line);padding:30px;
  display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.origin img{width:100px;height:auto;filter:drop-shadow(0 0 22px rgba(3,197,222,.45))}
.origin h4{margin:0 0 8px;font-size:1.05rem;color:#EAFBFF}
.origin p{margin:0 0 16px;color:var(--muted);font-size:.94rem}
.origin code{font-family:ui-monospace,"Consolas",monospace;font-size:.86em;color:var(--aqua)}
.swatches{display:flex;flex-wrap:wrap;gap:8px}
.swatches i{
  width:74px;height:40px;font-style:normal;font-size:.58rem;
  font-family:ui-monospace,"Consolas",monospace;color:rgba(255,255,255,.85);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:3px;
  clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,7px 100%,0 calc(100% - 7px));
}
.swatches i.dk{color:rgba(3,3,4,.78)}   /* dark label on the bright wing facets */

/* ============================ detail pages ============================== */
.detail-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:url("facets-band.svg") center/cover no-repeat,var(--night);
}
/* Veiled enough to carry text on the left, open enough to show facets right. */
.detail-hero:before{content:"";position:absolute;inset:0;
  background:radial-gradient(620px 300px at 88% 50%,rgba(3,197,222,.22),transparent 72%),
             linear-gradient(90deg,rgba(9,17,26,.94) 0%,rgba(9,17,26,.80) 40%,rgba(9,17,26,.18) 100%)}
.detail-hero .wrap{position:relative;padding-top:52px;padding-bottom:46px}
.crumb{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.crumb a{color:var(--aqua)}
.detail-hero h1{margin:0 0 8px;font-size:clamp(1.9rem,4vw,2.7rem);letter-spacing:-.025em;color:#EAFBFF}
.detail-hero .tl{color:#B4D3DF;font-size:1.08rem;margin-bottom:16px}
.meta{display:flex;gap:8px;flex-wrap:wrap}

.layout{display:grid;grid-template-columns:1fr 330px;gap:44px;padding:52px 0 70px;align-items:start}
.prose p{margin:0 0 18px;color:#B7D2DE}
.prose p strong{color:#EAFBFF}
.prose p:first-child{
  font-size:1.14rem;border-left:3px solid var(--body);padding-left:18px;color:#D9EEF4;
}
.aside{position:sticky;top:82px}
.box{
  background:var(--panel);border:1px solid var(--line);padding:26px;
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));
}
.box h4{margin:0 0 16px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ice)}
.box ul{list-style:none;margin:0 0 22px;padding:0}
.box li{position:relative;padding:9px 0 9px 22px;color:#A9C6D3;font-size:.95rem;
  border-bottom:1px solid rgba(27,48,64,.8)}
.box li:last-child{border-bottom:none}
.box li:before{ /* a facet, not a bullet */
  content:"";position:absolute;left:0;top:16px;width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:9px solid var(--body);
}
/* A lit facet: azure base, brighter cyan on hover, dark ink throughout. The
   label colour is restated on every state so it can never be inherited away. */
.btn{
  display:block;text-align:center;background:var(--azure);color:var(--ink);
  font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:14px;
  transition:background .16s;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
}
.btn:hover,.btn:focus-visible{background:var(--aqua);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* ============================ footer ==================================== */
footer.site{border-top:1px solid var(--line);background:#070E15;padding:26px 0;color:var(--muted);font-size:.9rem}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media(max-width:900px){
  .hero .wrap{grid-template-columns:1fr;padding-top:52px;padding-bottom:52px}
  .hero-art{order:-1}
  .hero-art img{width:200px}
  .layout{grid-template-columns:1fr;gap:30px}
  .aside{position:static}
  .origin{grid-template-columns:1fr}
}

/* ======================= light mode ("day facets") ======================= */
/* The accents keep their colours; only the ground turns to paper. */
[data-theme="light"]{
  --bg:#F2F7F9;--panel:#FFFFFF;--panel-2:#F6FBFD;--line:#CFE2E9;
  --text:#0B1F2B;--muted:#54707E;
}
/* Light mode swaps the dark mesh for the bright-facet one, veiled back to
   paper — same triangles, daytime ground. */
[data-theme="light"] .hero{background:url("facets-light.svg") center/cover no-repeat,#F2F7F9}
[data-theme="light"] .detail-hero{background:url("facets-band-light.svg") center/cover no-repeat,#F2F7F9}
[data-theme="light"] .hero:before{
  background:radial-gradient(760px 460px at 78% 10%,rgba(255,255,255,.62),transparent 70%),
             linear-gradient(180deg,rgba(244,251,253,.86),rgba(242,247,249,.93));
}
[data-theme="light"] .detail-hero:before{
  background:linear-gradient(90deg,rgba(244,251,253,.96) 0%,rgba(244,251,253,.90) 40%,rgba(242,247,249,.72) 100%);
}
[data-theme="light"] .hero h1,[data-theme="light"] .head h2,
[data-theme="light"] .card h3,[data-theme="light"] .detail-hero h1,
[data-theme="light"] .origin h4,[data-theme="light"] .prose p strong{color:#08303F}
[data-theme="light"] .hero h1{text-shadow:none}
[data-theme="light"] .hero .lead,[data-theme="light"] .detail-hero .tl{color:#3C5C6A}
[data-theme="light"] .pill{background:#FFFFFF;color:#0271CA;border-color:#9BD9E6}
[data-theme="light"] .pill i{border-bottom-color:#0271CA}
[data-theme="light"] .stats div{background:rgba(255,255,255,.9)}
[data-theme="light"] .stats b{color:#0271CA}
[data-theme="light"] .card p{color:#456776}
[data-theme="light"] .card .more{color:#0271CA}
[data-theme="light"] .card:hover .more{color:#03A5E6}
[data-theme="light"] .chip{background:var(--teal);color:#FFFFFF}
[data-theme="light"] header.site{background:rgba(255,255,255,.93)}
[data-theme="light"] .brand{color:#08303F}
[data-theme="light"] nav.top a:hover{background:#EAF4F7}
[data-theme="light"] .prose p{color:#33586A}
[data-theme="light"] .prose p:first-child{color:#123545}
[data-theme="light"] .box li{color:#3F6273;border-bottom-color:#E2EEF2}
[data-theme="light"] .box h4{color:#0271CA}
/* Same button in both modes — a bright facet reads the same on either ground. */
[data-theme="light"] .btn{background:var(--azure);color:var(--ink)}
[data-theme="light"] .btn:hover,
[data-theme="light"] .btn:focus-visible{background:var(--aqua);color:var(--ink)}
[data-theme="light"] a{color:#0271CA}
[data-theme="light"] a:hover:not(.btn){color:#03A5E6}
[data-theme="light"] footer.site{background:#E8F1F5;color:#54707E}
[data-theme="light"] .swatches i{color:rgba(255,255,255,.9)}

/*THEME*/
.theme-toggle{position:fixed;right:18px;bottom:18px;z-index:9999;width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(0,0,0,.12);
  background:#ffffff;color:#0B3C4A;box-shadow:0 8px 24px -8px rgba(0,0,0,.45);
  transition:transform .15s,background .2s,color .2s;-webkit-tap-highlight-color:transparent}
.theme-toggle:hover{transform:scale(1.09)}
.theme-toggle svg{width:22px;height:22px}
.theme-toggle .i-sun{display:none}
[data-theme="dark"] .theme-toggle{background:#2d2d2d;color:#7ED1E9;border-color:rgba(255,255,255,.16)}
[data-theme="dark"] .theme-toggle .i-sun{display:block}
[data-theme="dark"] .theme-toggle .i-moon{display:none}

/* Long brand: let the header stack rather than crowd the nav on small screens */
@media(max-width:620px){
  header.site .wrap{height:auto;flex-wrap:wrap;gap:6px;padding-top:10px;padding-bottom:10px}
  .brand b{font-size:.9rem}
  nav.top{flex-wrap:wrap;gap:2px}
  nav.top a{white-space:nowrap;padding:6px 8px;letter-spacing:.1em;font-size:.7rem}
}


/* ---- added by build.py -------------------------------------------------- */
.btn-alt{background:transparent;color:var(--aqua);border:1px solid var(--line);
  margin-top:10px}
.btn-alt:hover{background:var(--panel-2);color:var(--ice)}
.nodl{margin:0;padding:13px 0 2px;color:var(--muted);font-size:.9rem;font-style:italic}

/* the brand is no longer one anchor: nested <a> is invalid, so it holds two.
   Both must keep the brand colours rather than the generic link colour. */
.brand a{color:inherit;text-decoration:none}
.brand a.mos{color:var(--body)}
.brand a.mos:hover{color:var(--ice)}
/* the butterfly is the home link; "Friendly software for" is plain text */
.brand a.home{display:inline-flex;align-items:center;border-radius:4px}
.brand a.home:hover img{filter:brightness(1.25)}
.brand a.home:focus-visible{outline:2px solid var(--body);outline-offset:3px}
.hero h1 a.mos-h{color:inherit;text-decoration:none}
.hero h1 a.mos-h:hover em{text-decoration:underline}
footer.site a.mos-f{color:inherit;text-decoration:underline;text-underline-offset:3px}
footer.site a.mos-f:hover{color:var(--ice)}

/* Screenshot sits in the prose column, fitted to it. Spanning both columns to
   show it larger put it underneath the sticky HIGHLIGHTS box on scroll, so the
   full-size view is an overlay instead. */
.shot{margin:26px 0 0;padding:0}
.shot a{display:block;cursor:zoom-in}
/* width:auto + max-width:100% -- natural size when it fits the column,
   scaled down when it does not, never enlarged past 1:1. width:100%
   would upscale a screenshot narrower than the column (NumSnake is
   398px wide against a ~684px column) and make it blurry. */
.shot img{width:auto;max-width:100%;height:auto;display:block;border:1px solid var(--line)}
.shot figcaption{margin-top:9px;font-size:.82rem;color:var(--muted)}
.shot .zoom{color:var(--aqua)}

/* Full-size overlay, CSS only -- :target, no JavaScript. The close links point
   back at the figure's own id so dismissing it does not jump to the top. */
.lightbox{display:none}
.lightbox:target{display:block;position:fixed;inset:0;z-index:300;
  background:rgba(3,10,16,.93)}
.lightbox .lb-bg{position:absolute;inset:0;cursor:zoom-out}
.lightbox img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:auto;height:auto;max-width:calc(100vw - 56px);max-height:calc(100vh - 56px);
  border:1px solid var(--line);box-shadow:0 30px 90px -20px rgba(0,0,0,.85)}
.lightbox .lb-close{position:absolute;top:10px;right:22px;z-index:2;line-height:1;
  color:#fff;font-size:2.1rem;text-decoration:none;padding:4px 10px}
.lightbox .lb-close:hover{color:var(--ice)}