/* ============================================================
   Tensorust - "Plaster & Brass"
   A warm limewash-plaster house with Art Deco parts bolted into it.
   The seams are meant to show.

   Shared by every page. Page-specific rules live in each file.
   ============================================================ */

:root{
  /* surfaces: warm plaster, from recessed to raised */
  --plaster:#f4ede1;
  --plaster-2:#ebe1cf;
  --linen:#fbf7ef;

  /* the deco graft: jet slabs */
  --jet:#1a1512;
  --jet-2:#241d18;

  /* ink */
  --ink:#221c16;
  --ink-soft:#5b5047;
  --ink-faint:#736757;

  /* pigments */
  --clay:#b4523a;        /* display + large text only */
  --clay-deep:#8e3d2b;   /* small text, links */
  --clay-wash:rgba(180,82,58,.10);
  --sage:#6d7d64;
  --sage-wash:rgba(109,125,100,.12);

  /* metal: decorative on plaster, text-safe on jet */
  --brass:#a9803f;
  --brass-lit:#d8b268;
  --brass-wash:rgba(169,128,63,.14);

  /* rules */
  --hair:rgba(34,28,22,.15);
  --hair-2:rgba(34,28,22,.30);
  --hair-brass:rgba(169,128,63,.42);
  --hair-lit:rgba(216,178,104,.28);

  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --deco:"Josefin Sans","Century Gothic",Futura,sans-serif;
  --body:"Karla",-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  --sans:var(--body);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  /* ----------------------------------------------------------------
     Light and relief.
     One warm light, low and from the top left. Everything cast from it
     agrees: contact shadow tight and to the bottom right, ambient soft
     and below, and a pale top edge where the light catches the lip.
     ---------------------------------------------------------------- */
  --edge-lit:rgba(255,250,240,.75);      /* the lit top lip */
  --edge-dark:rgba(59,40,23,.13);        /* the shaded bottom lip */

  /* resting on the wall */
  --elev-1:
    0 1px 0 var(--edge-dark),
    0 2px 3px -2px rgba(59,40,23,.30),
    0 8px 18px -12px rgba(59,40,23,.38);
  /* raised */
  --elev-2:
    0 1px 0 var(--edge-dark),
    0 3px 5px -3px rgba(59,40,23,.34),
    0 16px 30px -16px rgba(59,40,23,.44);
  /* held */
  --elev-3:
    0 2px 0 var(--edge-dark),
    0 6px 10px -5px rgba(59,40,23,.34),
    0 30px 52px -24px rgba(59,40,23,.5);

  /* pressed into the plaster rather than sitting on it */
  --deboss:
    inset 0 3px 7px -3px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(0,0,0,.5),
    0 1px 0 var(--edge-lit);

  /* clipped shapes cannot use box-shadow, so deco slabs cast with filter */
  --cast:drop-shadow(0 2px 2px rgba(59,40,23,.30)) drop-shadow(0 14px 22px rgba(59,40,23,.30));
  --cast-2:drop-shadow(0 3px 3px rgba(59,40,23,.34)) drop-shadow(0 22px 34px rgba(59,40,23,.38));

  --lift:var(--elev-1);
  --lift-2:var(--elev-2);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{
  position:relative;
  margin:0;
  color:var(--ink);
  background-color:var(--plaster);
  font:400 16.5px/1.65 var(--body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* plaster grain: fractal noise, no image requests */
body::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.24'/%3E%3C/svg%3E");
}
body>*{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px}
img{max-width:100%}
::selection{background:var(--clay);color:var(--linen)}

.wrap{max-width:1120px;margin:0 auto;padding:0 26px}
.wrap-tight{max-width:940px;margin:0 auto;padding:0 26px}

/* ------------------------------------------------------------
   Type
   ------------------------------------------------------------ */

h1,h2,h3,h4{margin:0;font-weight:400}

.display{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:600;
  line-height:1.02;
  letter-spacing:-.02em;
  text-wrap:balance;
}

/* deco eyebrow: wide caps on a brass rule */
.eyebrow{
  display:inline-flex;align-items:center;gap:12px;
  font:600 11.5px/1 var(--deco);
  letter-spacing:.30em;text-transform:uppercase;
  color:var(--clay-deep);
}
.eyebrow::before{
  content:"";width:34px;height:0;
  border-top:1px solid var(--brass);
  border-bottom:1px solid var(--brass);
  height:4px;
}
.on-jet .eyebrow,.jet .eyebrow{color:var(--brass-lit)}

.lede{font-size:19.5px;line-height:1.6;color:var(--ink-soft);max-width:64ch}
.note{font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:70ch}
.fine{font-size:13px;line-height:1.6;color:var(--ink-faint)}
.tabular{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------
   Motifs. The Frankenstein hardware.
   ------------------------------------------------------------ */

/* stitched seam: a suture, used where boho meets deco.
   The pale drop shadow underneath cuts it into the surface. */
.seam,.chevrons{filter:drop-shadow(0 1px 0 var(--edge-lit))}
.seam{
  height:24px;width:100%;
  background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24'%3E%3Cg fill='none' stroke='%23a9803f' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 12h30' opacity='.55'/%3E%3Cpath d='M9 5l7 14M16 5L9 19' opacity='.9'/%3E%3C/g%3E%3C/svg%3E");
}
.seam.vert{
  width:24px;height:auto;align-self:stretch;background-repeat:repeat-y;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='30'%3E%3Cg fill='none' stroke='%23a9803f' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M12 0v30' opacity='.55'/%3E%3Cpath d='M5 9l14 7M5 16l14-7' opacity='.9'/%3E%3C/g%3E%3C/svg%3E");
}

/* chevron rule */
.chevrons{
  height:12px;width:100%;background-repeat:repeat-x;background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12'%3E%3Cpath d='M0 10L11 2l11 8' fill='none' stroke='%23a9803f' stroke-width='1.2' opacity='.6'/%3E%3C/svg%3E");
}

/* Four brass rivets, one per corner: the bolted-on look.
   Each one is a dome, not a dot: lit crown to the top left, brass body,
   dark rim to the bottom right, and a contact shadow on the surface. */
.riveted{position:relative}
.riveted::before{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background-repeat:no-repeat;
  --rivet:
    rgba(59,40,23,.34) 0 3.9px,
    transparent 4.1px;
  background-image:
    radial-gradient(circle at 12.2px 12.2px,#f0dcae 0 .9px,var(--brass-lit) 1.1px 1.9px,var(--brass) 2.1px 3.1px,rgba(52,34,12,.65) 3.2px 3.6px,var(--rivet)),
    radial-gradient(circle at calc(100% - 13.8px) 12.2px,#f0dcae 0 .9px,var(--brass-lit) 1.1px 1.9px,var(--brass) 2.1px 3.1px,rgba(52,34,12,.65) 3.2px 3.6px,var(--rivet)),
    radial-gradient(circle at 12.2px calc(100% - 13.8px),#f0dcae 0 .9px,var(--brass-lit) 1.1px 1.9px,var(--brass) 2.1px 3.1px,rgba(52,34,12,.65) 3.2px 3.6px,var(--rivet)),
    radial-gradient(circle at calc(100% - 13.8px) calc(100% - 13.8px),#f0dcae 0 .9px,var(--brass-lit) 1.1px 1.9px,var(--brass) 2.1px 3.1px,rgba(52,34,12,.65) 3.2px 3.6px,var(--rivet));
}
/* on jet the contact shadow reads as light spill instead */
.jet.riveted::before,.on-jet.riveted::before{
  --rivet:
    rgba(216,178,104,.16) 0 4.2px,
    transparent 4.4px;
}

/* boho arch */
.arch{border-radius:clamp(70px,16vw,150px) clamp(70px,16vw,150px) 10px 10px}
.arch-sm{border-radius:56px 56px 8px 8px}
/* hand-thrown, uneven corners */
.organic{border-radius:20px 26px 18px 24px}

/* deco stepped corner (ziggurat notch, top right) */
.stepped{
  clip-path:polygon(0 0,calc(100% - 40px) 0,calc(100% - 40px) 13px,calc(100% - 20px) 13px,calc(100% - 20px) 26px,100% 26px,100% 100%,0 100%);
}

/* deco sunburst fan. Rays radiate up and out from the box's bottom centre,
   so place the box so that its bottom edge sits where the sun should be. */
.sunburst{
  position:absolute;pointer-events:none;z-index:0;
  background:repeating-conic-gradient(from 180deg at 50% 100%,
    var(--brass) 0deg .9deg,transparent .9deg 7.2deg);
  -webkit-mask-image:radial-gradient(ellipse 92% 104% at 50% 100%,#000 8%,rgba(0,0,0,.6) 52%,transparent 96%);
  mask-image:radial-gradient(ellipse 92% 104% at 50% 100%,#000 8%,rgba(0,0,0,.6) 52%,transparent 96%);
  opacity:.30;
}
/* flipped: rays hang downward from the box's top edge */
.sunburst.down{transform:rotate(180deg)}

/* jet slab. Set into the plaster, not laid on top of it. */
.jet{background:var(--jet);color:#f0e8dc}
.jet h1,.jet h2,.jet h3,.jet .display{color:#f7f1e6}
/* any clipped deco shape casts with a filter, since box-shadow ignores clip-path */
.stepped,.cast{filter:var(--cast)}

/* ------------------------------------------------------------
   Buttons: deco cut corners, no rounding
   ------------------------------------------------------------ */

.btn{
  display:inline-block;cursor:pointer;border:none;
  background:var(--clay);color:#fdf6ec;
  font:600 13px/1 var(--deco);letter-spacing:.20em;text-transform:uppercase;
  padding:17px 28px;
  clip-path:polygon(11px 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%,0 11px);
  /* the clip eats box-shadow, so the key is a filter and the lit lip is inset */
  box-shadow:inset 0 1px 0 rgba(255,240,225,.28),inset 0 -2px 0 rgba(78,26,13,.35);
  filter:drop-shadow(0 2px 1px rgba(59,40,23,.28)) drop-shadow(0 8px 12px rgba(59,40,23,.28));
  transition:background .16s ease,transform .16s cubic-bezier(.2,0,0,1),filter .16s ease;
}
.btn:hover{background:var(--clay-deep);transform:translateY(-2px);
  filter:drop-shadow(0 3px 2px rgba(59,40,23,.3)) drop-shadow(0 14px 20px rgba(59,40,23,.32))}
.btn:active{transform:translateY(1px);
  filter:drop-shadow(0 1px 1px rgba(59,40,23,.34))}

.btn.ghost{
  background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--hair-2),inset 0 1px 0 var(--edge-lit);
  clip-path:none;
  filter:drop-shadow(0 1px 0 var(--edge-dark)) drop-shadow(0 6px 10px rgba(59,40,23,.16));
}
.btn.ghost:hover{background:var(--brass-wash);box-shadow:inset 0 0 0 1px var(--brass);color:var(--ink);
  filter:drop-shadow(0 2px 1px rgba(59,40,23,.2)) drop-shadow(0 12px 16px rgba(59,40,23,.2))}

.btn.brass{background:var(--brass);color:#1a1512}
.btn.brass:hover{background:var(--brass-lit)}

/* text link that means "go" */
.go{
  font:600 12.5px/1 var(--deco);letter-spacing:.16em;text-transform:uppercase;
  color:var(--clay-deep);border-bottom:1px solid var(--hair-brass);padding-bottom:3px;
  display:inline-block;transition:border-color .15s,color .15s;
}
.go:hover{color:var(--clay);border-color:var(--clay)}
.on-jet .go,.jet .go{color:var(--brass-lit);border-color:var(--hair-lit)}
.on-jet .go:hover,.jet .go:hover{color:#f7f1e6;border-color:var(--brass-lit)}

/* inline prose link */
.link{color:var(--clay-deep);border-bottom:1px solid var(--clay-wash);transition:border-color .15s}
.link:hover{border-color:var(--clay)}

/* ------------------------------------------------------------
   Chrome: nav + footer
   ------------------------------------------------------------ */

nav.bar{
  position:sticky;top:0;z-index:40;
  background:rgba(244,237,225,.93);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--hair);
  box-shadow:0 1px 0 var(--hair-brass),0 10px 22px -18px rgba(59,40,23,.55);
}
nav.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}

/* gap:0 is deliberate. The wordmark is two text runs ("Tensor" + <b>ust</b>), and a
   flex container makes each one its own item, so any gap here opens a hole mid-word. */
.brand{display:inline-flex;align-items:center;gap:0;font:600 20px/1 var(--deco);letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.brand b{font-weight:600;color:var(--clay)}
.brand .mark{flex:0 0 auto;display:block;margin-right:10px}

.navlinks{display:flex;align-items:center;gap:26px}
.navlinks a{font:600 12px/1 var(--deco);letter-spacing:.19em;text-transform:uppercase;color:var(--ink-soft);padding-bottom:3px;border-bottom:1px solid transparent}
.navlinks a:hover{color:var(--clay-deep);border-bottom-color:var(--brass)}
@media(max-width:900px){.navlinks{display:none}}

footer.foot{background:var(--jet);color:#cdc2b4;padding:52px 0 46px;border-top:3px double var(--brass)}
footer.foot a{color:var(--brass-lit)}
footer.foot .cols{display:flex;justify-content:space-between;gap:22px;flex-wrap:wrap;font-size:14px}
footer.foot .display{color:#f7f1e6}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */

section{padding:104px 0;position:relative}
section.tight{padding:64px 0}
/* a band of a different plaster reads as a change of plane: lit lip on top,
   shadow where it meets the wall below */
section.linen{background:var(--linen);
  box-shadow:inset 0 1px 0 var(--edge-lit),inset 0 -1px 0 var(--edge-dark)}
section.recessed{background:var(--plaster-2);
  box-shadow:inset 0 4px 8px -6px rgba(59,40,23,.4),inset 0 -1px 0 var(--edge-lit)}
section.jet{background:var(--jet);color:#e6dccf;
  box-shadow:inset 0 6px 12px -6px rgba(0,0,0,.75),0 -1px 0 var(--edge-lit)}
section+section:not(.jet):not(.linen):not(.recessed){border-top:1px solid var(--hair)}

.sectionhead{max-width:74ch;margin-bottom:44px}
.sectionhead .display{font-size:clamp(30px,4vw,44px);margin:18px 0 14px}
.jet .sectionhead .note{color:#bdb0a1}

/* ------------------------------------------------------------
   Panels
   ------------------------------------------------------------ */

.panel{
  background:var(--linen);
  box-shadow:inset 0 1px 0 var(--edge-lit),inset 0 0 0 1px var(--hair),var(--elev-1);
  border-radius:20px 26px 18px 24px;
  padding:28px;
  transition:box-shadow .2s cubic-bezier(.2,0,0,1),transform .2s cubic-bezier(.2,0,0,1);
}
.linen .panel{background:var(--plaster)}
/* interactive panels get picked up off the wall */
a.panel:hover,.panel.lift:hover{
  transform:translateY(-4px);
  box-shadow:inset 0 1px 0 var(--edge-lit),inset 0 0 0 1px var(--brass),var(--elev-3);
}
.panel h3{font-family:var(--display);font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.panel p{color:var(--ink-soft);font-size:15.5px;margin:10px 0 0}

.panel.deco{
  background:var(--jet);color:#ded3c5;border-radius:0;
  box-shadow:var(--deboss);
}
.panel.deco h3{color:#f7f1e6}
.panel.deco p{color:#c4b8a9}

/* label chip */
.chip{
  display:inline-block;align-self:flex-start;
  font:600 10.5px/1 var(--deco);letter-spacing:.22em;text-transform:uppercase;
  color:var(--clay-deep);
  border:1px solid var(--hair-brass);
  padding:7px 12px;
  box-shadow:inset 0 1px 0 var(--edge-lit),0 1px 0 var(--edge-dark);
}
.deco .chip,.jet .chip,.on-jet .chip{color:var(--brass-lit);border-color:var(--hair-lit)}

/* ------------------------------------------------------------
   Tables: editorial ledger, no boxes
   ------------------------------------------------------------ */

.ledger{width:100%;border-collapse:collapse;font-size:15px}
.ledger th{
  text-align:left;padding:14px 16px;
  font:600 10.5px/1.4 var(--deco);letter-spacing:.20em;text-transform:uppercase;
  color:var(--clay-deep);
  border-bottom:1px solid var(--brass);
  white-space:nowrap;
}
.ledger td{text-align:left;padding:17px 16px;border-bottom:1px solid var(--hair);vertical-align:top;color:var(--ink-soft)}
.ledger tr:last-child td{border-bottom:none}
.ledger td:first-child{padding-left:0}
.ledger th:first-child{padding-left:0}
.ledger .num{font-family:var(--display);font-weight:600;color:var(--brass);font-size:17px;width:44px}
.ledger .lead-cell{color:var(--ink);font-weight:500}
.tablescroll{overflow-x:auto}

/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */

.field{display:block}
.field label{display:block;font:600 11px/1 var(--deco);letter-spacing:.20em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:9px}
.field input,.field select,.input{
  width:100%;background:var(--linen);color:var(--ink);
  border:none;box-shadow:inset 0 0 0 1px var(--hair-2);
  border-radius:0;padding:15px 16px;font:400 16px/1.4 var(--body);
}
.field input:focus,.field select:focus,.input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--clay)}
.field input::placeholder,.input::placeholder{color:var(--ink-faint)}

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

@media(max-width:760px){
  section{padding:72px 0}
  .wrap,.wrap-tight{padding:0 20px}
  .lede{font-size:18px}
}