/* ============================================================================
   IRON MEN PROPERTIES - GLASS x CLAY ATOMS
   The single shared stylesheet: tokens, textures, and every atomic UI item.
   Imported by the style guide, the section library, and the site build.
   Canon: https://ironmen-design.pages.dev/styleguide
   ============================================================================ */
/* ============ SEMANTIC TOKENS — dark is default, light flips ============ */
  :root {
    --bg:#101110; --bg-2:#1b1d19; --bg-3:#25271f;
    --fg:#f3f4f0; --fg-70:rgba(243,244,240,0.72); --fg-55:rgba(243,244,240,0.55);
    --glass:rgba(22,24,20,0.45); --glass-strong:rgba(18,20,16,0.62);
    --line:rgba(243,244,240,0.26); --line-soft:rgba(243,244,240,0.13);
    --rim:inset 0 1.5px 0 rgba(255,255,255,0.28);
    --accent:#6abf4b; --accent-hot:#8fdd6e; --accent-text:#8fdd6e; --on-accent:#0b2003;
    --grad-green:linear-gradient(160deg,#8fdd6e 0%,#6abf4b 48%,#519e35 100%);
    --grad-green-deep:linear-gradient(160deg,#458c2a 0%,#37711f 55%,#2a5a17 100%);
    --grad-tint:linear-gradient(165deg,rgba(143,221,110,0.16),rgba(79,156,51,0.05));
    --danger:#e05252; --danger-soft:#f2a1a1;
    --edge:inset 0 1.5px 0 rgba(255,255,255,0.28), inset 0 -1.5px 0 rgba(0,0,0,0.55); --edge-strong:inset 0 2px 0 rgba(255,255,255,0.35), inset 0 -2px 0 rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.6); --recess:inset 0 1.5px 0 rgba(0,0,0,0.5), inset 0 0 0 1px rgba(0,0,0,0.2); --tick:rgba(243,244,240,0.45);
    --r-canvas:1rem; --r-panel:0.75rem; --r-puck:0.6rem; --r-plate:0.5rem; --r-control:0.4rem; --r-chip:0.25rem; --focus:var(--accent);
    --ease:cubic-bezier(0.16,1,0.3,1);
    --dur-1:150ms; --dur-2:250ms; --dur-3:400ms; --dur-4:600ms;
  }
[data-theme="light"] {
    --bg:#f1f1ed; --bg-2:#ffffff; --bg-3:#e7e8e2;
    --fg:#161710; --fg-70:rgba(22,23,16,0.74); --fg-55:rgba(22,23,16,0.62); --focus:var(--accent-text);
    --glass:rgba(255,255,255,0.55); --glass-strong:rgba(255,255,255,0.8);
    --line:rgba(22,23,16,0.2); --line-soft:rgba(22,23,16,0.1);
    --rim:inset 0 1.5px 0 rgba(255,255,255,0.9);
    --accent:#6abf4b; --accent-hot:#58a83c; --accent-text:#2f6519; --on-accent:#0b2003;
    --grad-green:linear-gradient(160deg,#7ecf5c 0%,#63b845 48%,#4c9a31 100%);
    --grad-green-deep:linear-gradient(160deg,#458c2a 0%,#37711f 55%,#2a5a17 100%);
    --grad-tint:linear-gradient(165deg,rgba(106,191,75,0.14),rgba(47,101,25,0.04));
    --edge:inset 0 1.5px 0 rgba(255,255,255,0.9), inset 0 -1.5px 0 rgba(22,23,16,0.16); --edge-strong:inset 0 2px 0 rgba(255,255,255,0.95), inset 0 -2px 0 rgba(22,23,16,0.22), 0 0 0 1px rgba(22,23,16,0.2); --recess:inset 0 1.5px 0 rgba(22,23,16,0.14), inset 0 0 0 1px rgba(22,23,16,0.06); --tick:rgba(22,23,16,0.4);
  }
* { margin:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html { scroll-behavior:auto; } }
body { background:var(--bg); color:var(--fg); font-family:Barlow,sans-serif; transition:background 0.3s var(--ease), color 0.3s var(--ease); }
.caps { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; line-height:0.92; }
.label { font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; }
.glass { background:var(--glass); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line); box-shadow:var(--edge); }
.glass-strong { background:var(--glass-strong); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); border:1px solid var(--line); box-shadow:var(--edge); }
.icon { width:1.35rem; height:1.35rem; stroke:currentColor; stroke-width:1.9; fill:none; stroke-linecap:square; stroke-linejoin:miter; }
.iconbox { display:grid; place-items:center; width:3.2rem; height:3.2rem; border-radius:var(--r-chip); color:var(--accent-text); position:relative; }
/* construction details — registration ticks (sheet corner marks), recess = cut into the surface */
  .ticks { position:relative; }
.ticks::after, .puck::after, .plate-demo::after, .iconbox::after, .empty::after, .pn::after { content:''; position:absolute; inset:0.45rem; pointer-events:none; z-index:1;
    background:
      linear-gradient(var(--tick),var(--tick)) left top/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left top/1px 0.6rem no-repeat,
      linear-gradient(var(--tick),var(--tick)) right top/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right top/1px 0.6rem no-repeat,
      linear-gradient(var(--tick),var(--tick)) left bottom/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left bottom/1px 0.6rem no-repeat,
      linear-gradient(var(--tick),var(--tick)) right bottom/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right bottom/1px 0.6rem no-repeat; }
.iconbox::after { inset:0.3rem; }
/* buttons */
  .btn { display:inline-flex; align-items:center; gap:0.6rem; padding:1rem 1.7rem; white-space:nowrap; text-decoration:none; font-weight:600; font-size:0.8rem; letter-spacing:0.18em; text-transform:uppercase; border-radius:var(--r-control); border:none; cursor:pointer; font-family:Barlow,sans-serif; color:var(--fg); transition:transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease); }
/* focus — authored everywhere, never the UA ring; ink ring on green fills; on plates the registration ticks light up */
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--focus); outline-offset:3px; }
.btn-primary:focus-visible, .announce:focus-visible, .skiplink:focus-visible, .step.done .dot:focus-visible, .videocard .play:focus-visible { outline-color:var(--fg); }
details.acc summary:focus-visible, .menu a:focus-visible, .imgcard:focus-visible, .newsrow:focus-visible, .grid-gal a:focus-visible, .masonry a:focus-visible, .docrow:focus-visible { outline-offset:-3px; }
.range:focus-visible { outline-offset:4px; }
.searchbox:focus-within { outline:2px solid var(--focus); outline-offset:3px; }
.puck:focus-within, .plate-demo:focus-within, .iconbox:focus-within, .empty:focus-within, .ticks:focus-within, .docrow:focus-visible .doctype { --tick:var(--focus); }
.btn-primary { background:var(--grad-green); background-size:150% 100%; background-position:0% 0; color:var(--on-accent); box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.5), inset 0 -1.5px 0 rgba(0,0,0,0.3); transition:transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background-position var(--dur-2) var(--ease); }
.btn:active { transform:scale(0.98); }
.btn-primary:hover { background-position:90% 0; transform:translateY(-1px); }
.btn-glassy { background:var(--glass); backdrop-filter:blur(10px); border:1px solid var(--line); box-shadow:var(--edge); }
.btn-glassy:hover { border-color:var(--accent); transform:translateY(-1px); }
.btn-ghost { background:transparent; border:1px solid var(--line); }
.btn-ghost:hover { color:var(--accent-text); border-color:var(--accent); }
.btn-danger { background:linear-gradient(160deg,#c94444,#a63131); color:#fff; box-shadow:inset 0 1.5px 0 rgba(255,255,255,0.35), inset 0 -1.5px 0 rgba(0,0,0,0.3); }
.btn-sm { padding:0.65rem 1.1rem; font-size:0.72rem; min-height:2.75rem; }
/* states — disabled is recessed and dashed (= not yet built); busy keeps its width and shows the work */
  .btn[disabled], .btn[aria-disabled="true"] { background:var(--bg-3); color:var(--fg-55); box-shadow:var(--recess); border:1px dashed var(--line); cursor:not-allowed; }
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover { transform:none; background-position:0 0; }
.btn[aria-busy="true"] { color:transparent; position:relative; pointer-events:none; }
.btn[aria-busy="true"] > * { visibility:visible; opacity:0; }
.btn[aria-busy="true"]::after { content:''; position:absolute; inset:0; margin:auto; width:1rem; height:1rem; border-radius:50%; border:2px solid var(--on-accent); border-right-color:transparent; animation:spin 0.9s linear infinite; }
.btn-ghost[aria-busy="true"]::after, .btn-glassy[aria-busy="true"]::after { border-color:var(--fg); border-right-color:transparent; }
a.link { color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
/* badges/chips */
  .badge { display:inline-flex; align-items:center; gap:0.5rem; padding:0.4rem 0.7rem; border-radius:var(--r-chip); font-weight:600; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; line-height:1; border:1.5px solid currentColor; font-family:Barlow,sans-serif; }
.badge::before { content:''; width:0.55rem; height:0.55rem; background:currentColor; }
.badge-live { color:var(--accent-text); background:var(--grad-tint); }
.badge-progress { color:var(--fg-70); border-color:color-mix(in srgb, currentColor 70%, transparent); }
.badge-progress::before { background:repeating-linear-gradient(45deg, currentColor 0 1.5px, transparent 1.5px 3.5px); box-shadow:inset 0 0 0 1px currentColor; }
.badge-muted { color:var(--fg-55); border-style:dashed; }
.badge-muted::before { background:none; box-shadow:inset 0 0 0 1px currentColor; }
.fchip { display:inline-flex; align-items:center; gap:0.5rem; padding:0.55rem 1rem; min-height:2.75rem; border-radius:var(--r-control); border:1px solid var(--line); color:var(--fg-70); cursor:pointer; background:transparent; font-family:Barlow,sans-serif; font-size:0.85rem; }
.fchip[aria-pressed="true"] { background:var(--bg-2); color:var(--accent-text); border-color:var(--line); box-shadow:inset 0 2px 0 var(--accent); font-weight:600; }
.tag { display:inline-block; padding:0.3rem 0.7rem; border-radius:var(--r-chip); background:var(--bg-3); border:1px solid var(--line-soft); color:var(--fg-70); font-size:0.78rem; font-weight:500; font-variant-numeric:tabular-nums; }
/* forms */
  .field { display:flex; flex-direction:column; gap:0.5rem; min-width:15rem; }
.field label { color:var(--fg-70); }
.field .req { color:var(--accent-text); }
.field .hint { color:var(--fg-55); font-weight:400; text-transform:none; letter-spacing:0; margin-left:0.4rem; }
.input { background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-control); color:var(--fg); padding:0.9rem 1rem; font-family:Barlow,sans-serif; font-size:1rem; box-shadow:var(--recess); transition:border-color 0.18s var(--ease), box-shadow 0.18s var(--ease); }
.input::placeholder { color:var(--fg-55); }
.input:hover { border-color:var(--fg-55); }
.input:focus { border-color:var(--accent); box-shadow:var(--recess), inset 0 -2px 0 var(--accent); }
.input[aria-invalid="true"] { border-color:var(--danger); box-shadow:var(--recess), inset 0 -2px 0 var(--danger); }
.field .err { color:var(--danger-soft); font-size:0.85rem; display:flex; gap:0.45rem; align-items:center; }
.field .err::before { content:''; width:0.45rem; height:0.45rem; background:currentColor; flex:none; }
[data-theme="light"] .field .err { color:#b23030; }
select.input { appearance:none; padding-right:2.6rem; background-image:linear-gradient(45deg, transparent 50%, var(--fg-70) 50%), linear-gradient(135deg, var(--fg-70) 50%, transparent 50%); background-position:calc(100% - 1.35rem) 50%, calc(100% - 1rem) 50%; background-size:0.35rem 0.35rem; background-repeat:no-repeat; }
textarea.input { resize:vertical; min-height:6.5rem; }
.check { display:flex; gap:0.7rem; align-items:center; min-height:2.75rem; color:var(--fg-70); cursor:pointer; }
.check input { appearance:none; width:1.25rem; height:1.25rem; border:1px solid var(--line); border-radius:var(--r-chip); box-shadow:var(--recess); background:var(--bg-2); display:grid; place-items:center; cursor:pointer; flex:none; }
.check input:checked { background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.5 2.5 4.5-5' fill='none' stroke='%230b2003' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E") center/0.8rem no-repeat, var(--grad-green); border-color:transparent; box-shadow:none; }
.check input.toggle:checked { background:var(--grad-green); }
.radio input { border-radius:50%; }
.radio input:checked { background:radial-gradient(circle, var(--on-accent) 0 0.2rem, transparent calc(0.2rem + 1px)), var(--grad-green); }
.toggle { position:relative; width:3rem; height:1.6rem; appearance:none; background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:var(--recess); cursor:pointer; transition:background 0.2s var(--ease); flex:none; }
.toggle::after { content:''; position:absolute; top:2px; left:2px; width:1.15rem; height:1.15rem; border-radius:var(--r-chip); background:var(--fg); transition:transform 0.2s var(--ease); }
.toggle:checked { background:var(--grad-green); border-color:transparent; box-shadow:none; }
.toggle:checked::after { transform:translateX(1.4rem); background:var(--on-accent); }
.check input.toggle { width:3rem; height:1.6rem; border-radius:var(--r-control); }
.check input.toggle::after, .check input.toggle:checked::after { content:''; width:1.15rem; height:1.15rem; border-radius:var(--r-chip); font-size:0; }
.searchbox { display:flex; align-items:center; gap:0.7rem; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-control); box-shadow:var(--recess); padding:0.75rem 1.2rem; min-width:min(20rem,100%); }
.searchbox input { border:none; background:none; color:var(--fg); font-family:Barlow,sans-serif; font-size:1rem; flex:1; outline:none; }
.range { appearance:none; width:min(16rem,100%); height:0.4rem; border-radius:0.15rem; background:linear-gradient(90deg, var(--accent) var(--val,60%), var(--bg-3) var(--val,60%)); box-shadow:var(--recess); }
.range::-moz-range-thumb { width:1.3rem; height:1.3rem; border-radius:var(--r-chip); background:var(--grad-green); border:2px solid var(--bg-2); box-shadow:var(--edge); cursor:pointer; }
.range::-moz-range-track { height:0.4rem; background:transparent; }
.range::-webkit-slider-thumb { appearance:none; width:1.3rem; height:1.3rem; border-radius:var(--r-chip); background:var(--grad-green); border:2px solid var(--bg-2); box-shadow:var(--edge); cursor:pointer; }
.announce { display:flex; justify-content:center; gap:0.8rem; align-items:center; padding:0.65rem 1rem; border-radius:var(--r-control); background:var(--grad-green); color:var(--on-accent); font-weight:600; width:100%; }
.crumbs { display:flex; gap:0.6rem; align-items:center; color:var(--fg-55); }
.crumbs a { color:var(--fg-70); text-decoration:none; padding:0.8rem 0.3rem; margin:-0.8rem -0.3rem; }
.crumbs a:hover { color:var(--accent-text); }
/* pucks/plates */
  .puck { border-radius:var(--r-puck); padding:1.6rem 1.8rem; min-width:min(13rem,100%); position:relative; overflow:hidden; }
.puck::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-green); }
.puck .n { font-size:2.6rem; color:var(--accent-text); font-variant-numeric:tabular-nums; }
.puck p { margin-top:0.3rem; font-size:0.9rem; color:var(--fg-70); }
.prov { display:block; margin-top:0.7rem; padding-top:0.5rem; border-top:1px dotted var(--line-soft); font-size:0.7rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--fg-55); font-variant-numeric:tabular-nums; }
.plate-demo { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:0.4rem 1.4rem; border-radius:var(--r-plate); padding:0.9rem 1.3rem; position:relative; }
.plate-demo .caps { font-size:1.6rem; flex:1; display:flex; align-items:baseline; gap:1rem; min-width:0; }
.plate-demo .caps::after { content:''; flex:1 0 1rem; min-width:1rem; border-top:1px dotted var(--line); transform:translateY(-0.3em); }
.plate-demo .label { color:var(--accent-text); white-space:nowrap; flex:none; margin-left:auto; }
.plate-demo .caps:last-child::after { display:none; }
.progress { width:min(16rem,100%); height:0.55rem; border-radius:0.15rem; background:var(--bg-3); overflow:hidden; position:relative; box-shadow:var(--recess); }
.progress i { display:block; height:100%; background:var(--grad-green); }
.progress::after { content:''; position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), color-mix(in srgb, var(--fg) 22%, transparent) calc(25% - 1px), color-mix(in srgb, var(--fg) 22%, transparent) 25%); }
/* cards */
  .imgcard { border-radius:var(--r-panel); overflow:hidden; width:19rem; position:relative; border:1px solid var(--line); box-shadow:var(--edge); color:var(--fg); text-decoration:none; display:block; }
.imgcard img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform 0.4s var(--ease); }
.imgcard:hover img { transform:scale(1.04); }
.imgcard .ov { position:absolute; inset:auto 0.8rem 0.8rem; transform:translateY(8px); opacity:0.92; transition:transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.imgcard:hover .ov { transform:none; opacity:1; }
.contentcard { border-radius:var(--r-panel); overflow:hidden; width:19rem; background:var(--bg-2); border:1px solid var(--line); box-shadow:var(--edge); }
.contentcard img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.contentcard .b { padding:1.2rem 1.3rem 1.4rem; }
.contentcard .b h4 { font-size:1.5rem; }
.contentcard .b p { margin-top:0.5rem; color:var(--fg-70); font-size:0.95rem; line-height:1.55; }
.contentcard .tb { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); }
.contentcard .tb span:nth-child(n+3) { border-top:1px solid var(--line-soft); }
.contentcard .tb span:nth-child(even) { border-left:1px solid var(--line-soft); }
.contentcard .tb span:last-child:nth-child(odd) { grid-column:1 / -1; }
.contentcard .tb span { min-width:0; overflow:hidden; text-overflow:ellipsis; padding:0.55rem 0.9rem; font-weight:600; font-size:0.7rem; letter-spacing:0.16em; text-transform:uppercase; color:var(--fg-55); font-variant-numeric:tabular-nums; white-space:nowrap; }
.hcard { display:grid; grid-template-columns:11rem 1fr; border-radius:var(--r-panel); overflow:hidden; background:var(--bg-2); border:1px solid var(--line); max-width:30rem; box-shadow:var(--edge); }
.hcard img { width:100%; height:100%; object-fit:cover; }
.hcard .b { padding:1.1rem 1.2rem; }
.quote-card { border-radius:var(--r-panel); padding:2rem; max-width:30rem; }
.quote-card blockquote { font-size:1.15rem; line-height:1.55; font-weight:500; }
.quote-card .label { color:var(--accent-text); margin-top:1rem; display:block; }
.quote-card .who { color:var(--fg-55); margin-top:0.3rem; display:block; }
.team-card { border-radius:var(--r-panel); overflow:hidden; width:14rem; background:var(--bg-2); border:1px solid var(--line); }
.team-card img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.team-card .m { padding:1rem 1.1rem; }
.team-card .m .label { color:var(--accent-text); margin-top:0.3rem; display:block; }
.featile { width:17rem; border-radius:var(--r-panel); padding:1.5rem; background:var(--bg-2); border:1px solid var(--line); position:relative; overflow:hidden; }
.featile::before { content:''; position:absolute; inset:0 0 auto 0; height:3px; background:var(--grad-green); }
.featile h4 { font-size:1.4rem; margin-top:0.9rem; }
.featile p { margin-top:0.5rem; color:var(--fg-70); font-size:0.95rem; line-height:1.55; }
.featrow { display:grid; grid-template-columns:3.4rem 16rem 1fr; gap:1.4rem; align-items:start; padding:1.4rem 0; border-top:1px solid var(--line-soft); width:100%; }
.featrow h4 { font-size:1.5rem; }
.featrow p { color:var(--fg-70); line-height:1.6; max-width:52ch; }
.avatar { width:2.6rem; height:2.6rem; border-radius:50%; object-fit:cover; border:2px solid var(--bg-2); }
.avgroup { display:flex; }
.avgroup .avatar + .avatar { margin-left:-0.8rem; }
/* galleries */
  .grid-gal { display:grid; grid-template-columns:repeat(3,1fr); gap:0.9rem; width:100%; }
.grid-gal a { border-radius:var(--r-plate); overflow:hidden; position:relative; display:block; }
.grid-gal img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; transition:transform 0.4s var(--ease); }
.grid-gal a:hover img { transform:scale(1.05); }
.masonry { columns:3; column-gap:0.9rem; width:100%; }
.masonry a { display:block; border-radius:var(--r-plate); overflow:hidden; margin-bottom:0.9rem; }
.masonry img { width:100%; display:block; }
.carousel { position:relative; width:100%; }
.carousel .track { display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:0.8rem; }
.carousel .track > * { flex:0 0 22rem; scroll-snap-align:start; }
.carousel .ctrl { position:absolute; top:38%; width:2.75rem; height:2.75rem; border-radius:var(--r-control); display:grid; place-items:center; cursor:pointer; border:1px solid var(--line); color:var(--fg); z-index:2; }
.carousel .prev { left:-0.6rem; }
.carousel .next { right:-0.6rem; }
/* lists/tables */
  .newsrow { display:grid; grid-template-columns:9rem 1fr auto; gap:1.4rem; align-items:center; padding:1.1rem 1.3rem; border-radius:var(--r-plate); border:1px solid transparent; transition:border-color 0.18s var(--ease), background 0.18s var(--ease); width:100%; color:var(--fg); text-decoration:none; }
.newsrow:hover { background:var(--line-soft); border-color:var(--line); }
.newsrow time { color:var(--fg-55); }
.newsrow .t { font-size:1.1rem; font-weight:500; }
.newsrow .go { color:var(--accent-text); }
table.ledger { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--r-panel); overflow:hidden; }
.scrollx { max-width:100%; min-width:0; width:100%; overflow-x:auto; }
table.ledger th { text-align:left; padding:1rem 1.3rem; background:var(--line-soft); border-bottom:1px solid var(--line); white-space:nowrap; }
.sortbtn { all:unset; cursor:pointer; display:inline-flex; gap:0.4rem; align-items:center; font:inherit; letter-spacing:inherit; text-transform:inherit; color:inherit; padding:1rem 0; margin:-1rem 0; }
.sortbtn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.sortbtn .icon { width:0.9rem; height:0.9rem; transform:rotate(90deg); color:var(--accent-text); }
th[aria-sort="descending"] .sortbtn .icon { transform:rotate(-90deg); }
table.ledger th .sort { color:var(--accent-text); }
table.ledger td { padding:1.05rem 1.3rem; border-bottom:1px solid var(--line-soft); }
table.ledger tr:last-child td { border-bottom:none; }
table.ledger tr:hover td { background:var(--line-soft); }
dl.deflist { display:grid; grid-template-columns:minmax(6rem,12rem) 1fr; gap:0.7rem 1.6rem; max-width:36rem; }
dl.deflist dt { color:var(--fg-55); }
dl.deflist dd { font-weight:500; }
/* document row — the Planroom atom: type plate · name + meta · status stamp · action */
  .docrow { display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:0.8rem 1rem; border:1px solid var(--line); border-radius:var(--r-plate); background:var(--bg-2); box-shadow:var(--edge); color:var(--fg); text-decoration:none; width:100%; max-width:42rem; transition:border-color var(--dur-1) var(--ease); }
.docrow:hover { border-color:var(--accent); }
.docrow .doctype { display:grid; place-items:center; width:3rem; height:3rem; border-radius:var(--r-chip); border:1px solid var(--line); background:var(--bg-3); font-weight:700; font-size:0.7rem; letter-spacing:0.12em; position:relative; }
.docrow .doctype::after { content:''; position:absolute; inset:0.25rem; pointer-events:none; background:linear-gradient(var(--tick),var(--tick)) left top/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left top/1px 0.6rem no-repeat, linear-gradient(var(--tick),var(--tick)) right top/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right top/1px 0.6rem no-repeat, linear-gradient(var(--tick),var(--tick)) left bottom/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) left bottom/1px 0.6rem no-repeat, linear-gradient(var(--tick),var(--tick)) right bottom/0.6rem 1px no-repeat, linear-gradient(var(--tick),var(--tick)) right bottom/1px 0.6rem no-repeat; }
.docrow .docmain { min-width:0; }
.docrow .docmain b { display:block; font-size:1.05rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.docrow .docmeta { display:flex; gap:0.6rem; flex-wrap:wrap; margin-top:0.2rem; font-size:0.72rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--fg-55); font-variant-numeric:tabular-nums; }
.docrow .docmeta span + span::before { content:'·'; margin-right:0.6rem; color:var(--fg-55); }
@media (max-width:600px){ .docrow { grid-template-columns:auto 1fr; } .docrow .badge, .docrow .btn { grid-column:2; justify-self:start; } }
.dl { display:flex; justify-content:space-between; align-items:center; gap:1.4rem; border:1px solid var(--line); border-radius:var(--r-plate); padding:1rem 1.3rem; width:100%; max-width:40rem; }
.pager { display:inline-flex; gap:0.4rem; }
.pager a { min-width:2.75rem; min-height:2.75rem; display:inline-grid; place-items:center; padding:0.4rem; border-radius:var(--r-chip); color:var(--fg-70); text-decoration:none; border:1px solid transparent; }
.pager a:hover { border-color:var(--line); color:var(--fg); }
.pager a.cur { background:var(--bg-2); color:var(--accent-text); border-color:var(--line); box-shadow:inset 0 2px 0 var(--accent); font-weight:600; }
/* disclosure/steps */
  .tabs { display:inline-flex; gap:0.4rem; padding:0.4rem; border-radius:var(--r-puck); max-width:100%; overflow-x:auto; }
.tab { white-space:nowrap; min-height:2.75rem; padding:0.7rem 1.2rem; border-radius:var(--r-control); color:var(--fg-70); cursor:pointer; border:1px solid transparent; background:transparent; font-family:Barlow,sans-serif; }
.tab[aria-selected="true"] { background:var(--bg-2); color:var(--accent-text); border-color:var(--line); box-shadow:inset 0 2px 0 var(--accent); font-weight:600; }
details.acc { border:1px solid var(--line); border-radius:var(--r-plate); overflow:hidden; width:100%; max-width:42rem; background:var(--bg-2); }
details.acc + details.acc { margin-top:0.7rem; }
details.acc summary { list-style:none; cursor:pointer; padding:1.1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; font-weight:500; }
details.acc summary::after { content:'+'; color:var(--accent-text); font-size:1.3rem; transition:transform var(--dur-2) var(--ease); }
details.acc[open] summary::after { transform:rotate(45deg); }
details.acc[open] .body { animation:rise var(--dur-2) var(--ease); }
@keyframes rise { from { opacity:0; transform:translateY(-4px); } }
details.acc .body { padding:0 1.3rem 1.2rem; color:var(--fg-70); line-height:1.6; }
.steps { list-style:none; padding:0; margin:0; display:grid; gap:0; width:100%; max-width:40rem; }
.step { display:grid; grid-template-columns:2.6rem 1fr; gap:1.2rem; position:relative; padding-bottom:1.8rem; }
.step:not(:last-child)::before { content:''; position:absolute; left:1.25rem; top:2.6rem; bottom:0; width:2px; background:var(--line); }
.step .dot { width:2.6rem; height:2.6rem; border-radius:var(--r-chip); font-variant-numeric:tabular-nums; display:grid; place-items:center; font-weight:700; background:var(--bg-3); color:var(--fg-70); border:1px solid var(--line); }
.step.done .dot { background:var(--grad-green); color:var(--on-accent); border-color:transparent; }
.step.cur .dot { border-color:var(--accent); color:var(--accent-text); box-shadow:inset 0 0 0 1px var(--accent); }
.step h4 { font-size:1.35rem; padding-top:0.3rem; }
.step p { color:var(--fg-70); margin-top:0.3rem; line-height:1.55; }
.modal { border-radius:var(--r-panel); padding:1.8rem; width:min(24rem,100%); }
.modal h4 { font-size:1.6rem; }
.modal p { margin-top:0.6rem; color:var(--fg-70); line-height:1.55; }
.modal .acts { display:flex; gap:0.8rem; margin-top:1.4rem; justify-content:flex-end; }
.menu { border-radius:var(--r-plate); overflow:hidden; width:15rem; padding:0.4rem; }
.menu a { display:flex; justify-content:space-between; align-items:center; padding:0.7rem 0.9rem; border-radius:var(--r-chip); color:var(--fg); text-decoration:none; }
.menu a { transition:background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.menu a:hover { background:var(--line-soft); color:var(--accent-text); }
.tooltip { position:relative; display:inline-block; }
.tooltip .tip { display:none; position:absolute; bottom:calc(100% + 0.6rem); left:50%; transform:translateX(-50%); white-space:nowrap; padding:0.5rem 0.8rem; border-radius:var(--r-chip); background:var(--fg); color:var(--bg); font-size:0.8rem; font-weight:500; }
.tooltip .tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--fg); }
.tooltip:hover .tip, .tooltip:focus-within .tip { display:block; }
.fchip:hover { border-color:var(--accent); color:var(--fg); }
.toast { display:flex; align-items:center; gap:0.9rem; border-radius:var(--r-plate); padding:0.9rem 1.2rem; min-width:18rem; }
.toast .bar { width:3px; align-self:stretch; border-radius:2px; background:var(--grad-green); }
.toast-err .bar { background:var(--danger); }
/* feedback */
  .alert { display:flex; gap:0.9rem; align-items:flex-start; border-radius:var(--r-plate); padding:1rem 1.2rem; max-width:32rem; }
.alert-ok { background:var(--grad-tint); border:1px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.alert-err { background:rgba(224,82,82,0.1); border:1px solid rgba(224,82,82,0.45); }
.alert .dot { width:0.6rem; height:0.6rem; margin-top:0.45rem; flex:none; }
.alert-ok .dot { background:var(--accent); }
.alert-err .dot { background:var(--danger); }
.skeleton { border-radius:var(--r-plate); background:var(--bg-2); border:1px solid var(--line-soft); padding:1.2rem; width:19rem; }
.sk { border-radius:var(--r-chip); background:linear-gradient(90deg, var(--bg-3) 25%, var(--line-soft) 50%, var(--bg-3) 75%); background-size:200% 100%; animation:shimmer 1.6s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
.spinner { width:2.2rem; height:2.2rem; border-radius:50%; border:3px solid var(--line); border-top-color:var(--accent); animation:spin 0.9s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .sk,.spinner,.btn[aria-busy="true"]::after{animation:none;} .spinner{border-color:var(--accent); border-top-color:var(--line);} details.acc[open] .body{animation:none;} }
.empty { border:1px dashed var(--line); border-radius:var(--r-panel); padding:2.6rem; text-align:center; max-width:30rem; position:relative; }
.empty .iconbox { margin:0 auto; }
.empty h4 { font-size:1.5rem; margin-top:1rem; }
.empty p { color:var(--fg-70); margin-top:0.4rem; }
/* media */
  .videocard { position:relative; border-radius:var(--r-panel); overflow:hidden; width:26rem; max-width:100%; border:1px solid var(--line); }
.videocard img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; filter:brightness(0.85); }
.videocard .play { position:absolute; inset:0; margin:auto; width:4.2rem; height:4.2rem; border-radius:50%; background:var(--grad-green); display:grid; place-items:center; color:var(--on-accent); box-shadow:var(--edge-strong); border:none; cursor:pointer; }
.mapcard { border-radius:var(--r-panel); border:1px solid var(--line); background:var(--bg-2); width:26rem; max-width:100%; aspect-ratio:16/9; display:grid; place-items:center; }
[data-theme="light"] .only-light { display:block; }
[data-theme="light"] .only-dark { display:none; }
/* textures — Hero Patterns (MIT, /tex/*.svg) applied as masks: one black SVG, ink + alpha from tokens, so each works in both themes.
     Grounds only (bands, footers, tracks, placeholders). Never on glass, never on photography, at most one per section. */
  :root { --tex-ink:var(--fg); --tex-alpha:0.06; }
[data-theme="light"] { --tex-alpha:0.07; }
.tex { position:relative; isolation:isolate; }
.tex::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--tex-ink); opacity:var(--tex-alpha);
    -webkit-mask-image:var(--pat); mask-image:var(--pat); -webkit-mask-repeat:repeat; mask-repeat:repeat; -webkit-mask-size:var(--pat-size,auto); mask-size:var(--pat-size,auto); }
.tex-architect { --pat:url('/tex/architect.svg'); }
/* drafting cross-hatch — process, feature ledgers */
  .tex-graph { --pat:url('/tex/graph-paper.svg'); }
/* gridded sheet — timelines, planroom */
  .tex-topo { --pat:url('/tex/topography.svg'); --pat-size:600px 600px; }
/* survey contours — maps, site placeholders */
  .tex-beams { --pat:url('/tex/steel-beams.svg'); }
/* structural steel — green bands, CTAs */
  .tex-brick { --pat:url('/tex/brick-wall.svg'); }
/* masonry — footers */
  .tex-hatch { --pat:url('/tex/hatch.svg'); --pat-size:8px 8px; }
/* section-cut hatch = not yet built — empty states, unfilled tracks */
  .tex-cage { --pat:url('/tex/cage.svg'); }
/* rebar mesh — proof ledgers */
  .tex-plus { --pat:url('/tex/plus.svg'); }
/* survey crosses — logo strips, tint grounds */
  .tex-faint { --tex-alpha:0.035; }
.tex-strong { --tex-alpha:0.12; }
.tex-white { --tex-ink:#fff; --tex-alpha:0.07; }
/* the page is a drawing sheet: graph paper at 120px cells under every plain ground; bg-2 panels stay flat so plates sit ON the sheet */
  .tex-sheet { --pat:url('/tex/graph-paper.svg'); --pat-size:120px 120px; --tex-alpha:0.02; }
[data-theme="light"] .tex-sheet { --tex-alpha:0.025; }
.prose { max-width:68ch; font-size:1.1rem; line-height:1.7; color:var(--fg-70); }
.prose h3 { font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; color:var(--fg); font-size:1.6rem; margin:1.5em 0 0.4em; }
.prose > h3:first-child { margin-top:0; }
.prose p + p { margin-top:1em; }
.prose a { color:var(--accent-text); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.prose ul { margin:1em 0 0 1.2em; }
.prose li + li { margin-top:0.4em; }
.prose li::marker { color:var(--accent); }
.prose blockquote { margin:1.5em 0; padding:1.1rem 1.4rem; border-radius:var(--r-plate); background:var(--grad-tint); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent); color:var(--fg); font-weight:500; font-size:1.15rem; line-height:1.55; }
.prose blockquote footer { margin-top:0.6rem; font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.18em; color:var(--accent-text); }
.prose figure { margin:1.6em 0; }
.prose figure img { width:100%; border-radius:var(--r-panel); display:block; }
.prose figcaption { margin-top:0.6rem; font-size:0.85rem; color:var(--fg-55); }
.callout { border-radius:var(--r-plate); border:1px solid var(--line); background:var(--bg-2); padding:1.1rem 1.3rem; margin:1.5em 0; display:grid; grid-template-columns:auto 1fr; gap:0.9rem; align-items:start; }
.callout .dotbar { width:3px; align-self:stretch; border-radius:2px; background:var(--grad-green); }
/* wayfinding */
  .skiplink { position:relative; display:inline-block; background:var(--grad-green); color:var(--on-accent); padding:0.7rem 1.2rem; border-radius:var(--r-control); font-weight:600; }
/* build recipe: first element in <body>; off-canvas until focused */
  .skiplink.hidden-until-focus { position:absolute; left:1rem; top:-100%; z-index:100; }
.skiplink.hidden-until-focus:focus { top:1rem; }
.subnav { display:flex; gap:0.3rem; align-items:center; padding:0.5rem; border-radius:var(--r-puck); width:max-content; max-width:100%; overflow-x:auto; }
.subnav a { padding:0.6rem 1.1rem; border-radius:var(--r-control); color:var(--fg-70); text-decoration:none; }
.subnav a.on { background:var(--bg-2); color:var(--accent-text); font-weight:600; border:1px solid var(--line); box-shadow:inset 0 2px 0 var(--accent); }
.subnav a:hover { color:var(--fg); }
.prevnext { display:flex; justify-content:space-between; gap:1rem; width:100%; max-width:44rem; }
.pn { flex:1; max-width:20rem; position:relative; display:flex; flex-direction:column; gap:0.3rem; border:1px solid var(--line); border-radius:var(--r-plate); padding:1rem 1.3rem; text-decoration:none; color:var(--fg); transition:border-color var(--dur-1) var(--ease); }
.pn:hover { border-color:var(--accent); }
.pn.next { text-align:right; }
.pn .label { color:var(--fg-55); }
.pn b { font-size:1.2rem; }
.lightbox-demo { position:relative; border-radius:var(--r-panel); overflow:hidden; width:100%; max-width:40rem; background:rgba(8,9,8,0.92); padding:2rem; display:grid; place-items:center; }
.lightbox-demo img { max-width:100%; border-radius:var(--r-plate); }
.lightbox-demo .lbclose { position:absolute; top:1rem; right:1rem; }
.lightbox-demo .lbnav { position:absolute; top:50%; transform:translateY(-50%); }
.lightbox-demo .lbcap { position:absolute; left:0; right:0; bottom:0.8rem; text-align:center; color:rgba(243,244,240,0.8); }
@media (max-width:900px){ .router{grid-template-columns:1fr;} }
.play-pop { animation:pop var(--dur-3) var(--ease) both; }
.play-slide { animation:slidein var(--dur-3) var(--ease) both; }
.motion-stage { border-radius:var(--r-panel); background:var(--bg-3); border:1px solid var(--line); padding:2rem; display:grid; place-items:center; min-height:11rem; width:20rem; position:relative; }
.motion-stage .label.tagline { position:absolute; top:0.8rem; left:1rem; color:var(--fg-55); }
.durchip { border-radius:var(--r-plate); border:1px solid var(--line); padding:1rem 1.3rem; background:var(--bg-2); min-width:11rem; }
.durchip b { font-size:1.4rem; }
  @media (hover:none){ .imgcard .ov{transform:none;opacity:1;} }
@media (max-width:900px){ .hcard{grid-template-columns:1fr;} .hcard img{aspect-ratio:16/9;height:auto;} .featrow{grid-template-columns:3.4rem 1fr;} .featrow p{grid-column:2;} .newsrow{grid-template-columns:1fr;} .grid-gal{grid-template-columns:1fr 1fr;} .masonry{columns:2;} }
@media (prefers-reduced-motion:reduce){ .btn-primary { transition:none; } }