/* ————————————————————————————————————————————————
   lmtellson.com — Entrustment design system
   Extracted 2026-08-07 from the bundled site artifact.
   Ground: the cabinet, the dark. Paper: the label, the leaf.
   Amber: brass, wood grain, lamplight.
   ———————————————————————————————————————————————— */

/* —— fonts (latin subsets, self-hosted) —— */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;src:url("fonts/cormorant-roman.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/cormorant-italic.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:normal;font-weight:400 600;font-display:swap;src:url("fonts/ebgaramond-roman.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url("fonts/ebgaramond-italic.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Courier Prime';font-style:normal;font-weight:400;font-display:swap;src:url("fonts/courierprime-roman.woff2") format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* —— tokens —— */
:root{
/* ground: the cabinet, the dark */
--ink-void:#050503;
--ink-cabinet:#16130E;
--ink-panel:#1F1A13;
--ink-raised:#2A2219;
--ink-wood:#1D1107;
/* paper: the label, the card, the leaf */
--paper-high:#FAF9F3;
--paper:#EDE6D9;
--paper-aged:#D8CCBC;
--paper-worn:#BAAFA2;
--paper-shadow:#9A9084;
/* amber: brass, wood grain, lamplight */
--amber-deep:#3A2410;
--amber:#60391C;
--amber-lit:#835F35;
--amber-high:#A87C4A;
/* sepia: photographs, pressed flowers */
--sepia-deep:#2A1D10;
--sepia:#503720;
--sepia-light:#6E5236;
/* ink marks on paper */
--mark-ink:#1A1612;
--mark-ink-soft:#4A4238;
--mark-pencil:#6B6357;
/* semantic: surfaces */
--surface-page:var(--ink-void);
--surface-panel:var(--ink-cabinet);
--surface-raised:var(--ink-raised);
--surface-card:var(--paper);
--surface-card-aged:var(--paper-aged);
--surface-field:rgba(250,249,243,.04);
/* semantic: text */
--text-display:var(--paper-high);
--text-body:var(--paper-worn);
--text-muted:var(--paper-shadow);
--text-on-paper:var(--mark-ink);
--text-on-paper-soft:var(--mark-ink-soft);
--text-accent:var(--amber-high);
/* semantic: lines */
--rule-hair:rgba(237,230,217,.16);
--rule-strong:rgba(237,230,217,.34);
--rule-on-paper:rgba(26,22,18,.22);
--rule-ruled-line:rgba(26,22,18,.10);
--border-brass:rgba(168,124,74,.45);
/* semantic: interaction */
--focus-ring:var(--amber-high);
--link:var(--paper-high);
--link-hover:var(--amber-high);
/* type */
--font-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
--font-body:"EB Garamond",Georgia,"Times New Roman",serif;
--font-mark:"Courier Prime","Courier New",monospace;
--size-display-1:4.25rem;
--size-display-2:3rem;
--size-title:2.125rem;
--size-heading:1.5rem;
--size-subheading:1.1875rem;
--size-body-lg:1.1875rem;
--size-body:1.0625rem;
--size-small:0.9375rem;
--size-label:0.75rem;
--size-micro:0.6875rem;
--leading-display:1.06;
--leading-title:1.18;
--leading-body:1.62;
--leading-tight:1.35;
--tracking-display:0.14em;
--tracking-label:0.28em;
--tracking-smallcaps:0.18em;
--tracking-body:0.005em;
--weight-light:300;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
/* space & shape */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;
--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:144px;
--measure-narrow:34ch;--measure:64ch;--measure-wide:78ch;
--gutter-page:40px;--width-page:1180px;--width-reading:680px;
--radius-none:0px;--radius-card:2px;--radius-plate:3px;--radius-photo:6px;
/* shadow & light — paper lifted off the cabinet; lamplight from above */
--shadow-plate:0 18px 44px -12px rgba(0,0,0,.85),0 2px 6px rgba(0,0,0,.6);
--shadow-card:0 10px 26px -10px rgba(0,0,0,.75);
--shadow-raise:0 2px 10px rgba(0,0,0,.55);
--shadow-inset-paper:inset 0 0 60px rgba(90,70,44,.22),inset 0 0 0 1px rgba(26,22,18,.06);
--shadow-inset-well:inset 0 1px 3px rgba(0,0,0,.7);
--vignette-page:radial-gradient(120% 85% at 50% 8%,rgba(120,96,64,.10) 0%,rgba(5,5,3,0) 55%),radial-gradient(100% 70% at 50% 40%,rgba(5,5,3,0) 40%,rgba(5,5,3,.85) 100%);
--sheen-paper:linear-gradient(178deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 32%);
--ruled-lines:repeating-linear-gradient(180deg,transparent 0px,transparent 33px,var(--rule-ruled-line) 33px,var(--rule-ruled-line) 34px);
/* motion */
--ease-settle:cubic-bezier(.22,.61,.36,1);
--ease-drawer:cubic-bezier(.32,.06,.2,1);
--dur-quick:140ms;--dur-base:260ms;--dur-slow:520ms;--dur-reveal:900ms;
}

/* —— base —— */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background-color:var(--surface-page);background-image:var(--vignette-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--size-body);line-height:var(--leading-body);letter-spacing:var(--tracking-body);overflow-x:hidden;min-height:100vh}
a{color:var(--link);text-decoration:none;border-bottom:1px solid var(--rule-hair);transition:color var(--dur-base) var(--ease-settle),border-color var(--dur-base) var(--ease-settle)}
a:hover{color:var(--link-hover);border-bottom-color:var(--border-brass)}
:focus-visible{outline:1px solid var(--focus-ring);outline-offset:3px}
::selection{background:var(--amber);color:var(--paper-high)}
img{max-width:100%}

/* —— chrome —— */
.site-header{position:sticky;top:0;z-index:20;background:rgba(5,5,3,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule-hair)}
.site-header .bar{max-width:var(--width-page);margin:0 auto;padding:20px var(--gutter-page);display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap}
.brand{font-family:var(--font-display);font-size:var(--size-subheading);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--paper-high);font-weight:var(--weight-regular);border-bottom:none}
.brand:hover{color:var(--paper-high)}
.site-nav{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.site-nav a{display:flex;flex-direction:column;align-items:center;gap:7px;font-family:var(--font-mark);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border-bottom:none;transition:color var(--dur-base) var(--ease-settle)}
.site-nav a:hover{color:var(--text-accent)}
.site-nav a span{display:block;width:100%;height:1px;background:transparent}
.site-nav a[aria-current="page"]{color:var(--text-body)}
.site-nav a[aria-current="page"] span{background:var(--amber-high)}
.site-footer{border-top:1px solid var(--rule-hair);background:var(--surface-panel)}
.site-footer .bar{max-width:var(--width-page);margin:0 auto;padding:64px var(--gutter-page);display:flex;justify-content:space-between;align-items:flex-start;gap:48px;flex-wrap:wrap}
.site-footer .imprint{font-family:var(--font-display);font-size:var(--size-body);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--paper-high)}
.site-footer .colophon{margin-top:14px;font-family:var(--font-mark);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.site-footer nav{display:flex;gap:28px;flex-wrap:wrap}
.site-footer nav a{font-family:var(--font-mark);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted);border-bottom:none}
.site-footer nav a:hover{color:var(--text-accent)}

/* —— layout —— */
.page{max-width:var(--width-page);margin:0 auto;padding:96px var(--gutter-page) 144px}
.page-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.grid-hero{display:grid;grid-template-columns:minmax(160px,280px) minmax(0,1fr);gap:80px;align-items:center}
.grid-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:80px;align-items:start}
.grid-side-lg{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,400px);gap:80px;align-items:start}
.grid-press{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,360px);gap:64px;align-items:start}
.grid-contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);gap:80px;align-items:start}

/* —— components —— */
.tag{display:inline-block;font-family:var(--font-mark);font-size:var(--size-micro);letter-spacing:.2em;text-transform:uppercase;padding:5px 10px 4px;border:1px solid var(--rule-hair);border-radius:var(--radius-card);color:var(--text-muted)}
.tag-brass{color:var(--amber-high);border-color:var(--border-brass)}

.display{font-family:var(--font-display);font-weight:var(--weight-regular);line-height:var(--leading-display);letter-spacing:var(--tracking-display);text-transform:uppercase;color:var(--text-display);margin:0;text-indent:var(--tracking-display);text-align:left}
.display-1{font-size:var(--size-display-1)}
.display-2{font-size:var(--size-display-2)}
.display-title{font-size:var(--size-title)}

.smallcaps{font-family:var(--font-body);font-size:var(--size-label);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-body);line-height:var(--leading-tight)}
.sc-muted{color:var(--text-muted)}
.sc-amber{color:var(--amber-high)}
.sc-micro{font-size:var(--size-micro)}
.sc-small{font-size:var(--size-small)}

hr.rule{height:1px;border:0;background:var(--rule-hair);margin:0}
.rule-orn{display:flex;align-items:center;gap:var(--space-3)}
.rule-orn span{flex:1;height:1px;background:var(--rule-hair)}
.rule-orn i{width:4px;height:4px;transform:rotate(45deg);background:var(--rule-hair);opacity:.9}

.prose{font-family:var(--font-body);font-size:var(--size-body-lg);line-height:var(--leading-body);color:var(--text-body);max-width:var(--measure);text-wrap:pretty}
.prose p{margin:0 0 1em}
.prose p:last-child{margin-bottom:0}
.prose-ink{color:var(--text-on-paper)}
.ds-dropcap>p:first-of-type::first-letter{float:left;font-family:var(--font-display);font-size:3.6em;line-height:.82;padding:.06em .12em 0 0;color:var(--text-accent)}

.pullquote{margin:0;display:flex;flex-direction:column;align-items:center;gap:var(--space-5);text-align:center}
.pullquote blockquote{margin:0;font-family:var(--font-display);font-style:italic;font-size:var(--size-title);line-height:var(--leading-title);color:var(--text-display);max-width:32ch}
.pullquote figcaption{font-family:var(--font-body);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-body);font-weight:var(--weight-medium);text-transform:uppercase;letter-spacing:var(--tracking-label);line-height:1;border:1px solid transparent;border-radius:var(--radius-card);cursor:pointer;text-decoration:none;background:none;font-size:var(--size-label);padding:13px 26px 12px;transition:background var(--dur-base) var(--ease-settle),color var(--dur-base) var(--ease-settle),border-color var(--dur-base) var(--ease-settle),opacity var(--dur-quick) var(--ease-settle)}
.btn:active{transform:translateY(1px)}
.btn-lg{font-size:var(--size-small);padding:17px 38px 16px;letter-spacing:0.22em}
.btn-primary{background:var(--paper);color:var(--text-on-paper);border-color:var(--paper);box-shadow:var(--shadow-raise)}
.btn-primary:hover{background:var(--paper-high);color:var(--text-on-paper)}
.btn-outline{background:transparent;color:var(--text-display);border-color:var(--rule-strong)}
.btn-outline:hover{border-color:var(--paper-worn);background:rgba(237,230,217,.05);color:var(--text-display)}
.btn-quiet{background:transparent;color:var(--text-body);border-color:transparent;padding:6px 0;border-bottom:1px solid var(--rule-hair);border-radius:0}
.btn-quiet:hover{color:var(--paper-high);border-bottom-color:var(--paper-worn)}

/* underlined field on dark ground — the ledger line */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field .label{font-family:var(--font-body);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-muted)}
.field input{font-family:var(--font-body);font-size:var(--size-body);color:var(--text-display);background:var(--surface-field);border:0;border-bottom:1px solid var(--rule-hair);border-radius:0;padding:10px 2px 9px;outline:none;transition:border-color var(--dur-base) var(--ease-settle);width:100%}
.field input:focus{border-bottom-color:var(--amber-high)}
.field input::placeholder{color:var(--text-muted);opacity:.7}

/* the cover's hanging label: aged paper, faint ruled lines, a punched hole */
.indexcard{position:relative;background:var(--paper);color:var(--text-on-paper);border-radius:var(--radius-card);box-shadow:var(--shadow-plate),var(--shadow-inset-paper);padding:var(--space-7) var(--space-7) var(--space-6);font-family:var(--font-body);overflow:hidden}
.ic-worn{background:var(--paper-worn)}
.ic-aged{background:var(--paper-aged)}
.indexcard .ic-lines{position:absolute;inset:0;background:var(--ruled-lines);pointer-events:none}
.indexcard .ic-frame{position:absolute;inset:10px;border:1px solid var(--rule-ruled-line);pointer-events:none}
.indexcard .ic-hole{position:absolute;top:18px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--ink-void);box-shadow:inset 0 2px 3px rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.35)}
.indexcard .ic-body{position:relative}

/* brass-framed drawer plate holding a slip */
.plate{padding:7px;border-radius:var(--radius-plate);background:linear-gradient(170deg,#6b4a24 0%,#3a2410 55%,#25170a 100%);box-shadow:var(--shadow-card),inset 0 1px 0 rgba(200,155,96,.35);border:1px solid rgba(120,84,42,.55);position:relative}
.plate .rivet{position:absolute;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#b48a52,#4a3116)}
.plate .r-tl{top:6px;left:6px}.plate .r-tr{top:6px;right:6px}.plate .r-bl{bottom:6px;left:6px}.plate .r-br{bottom:6px;right:6px}
.plate .slip{background:linear-gradient(180deg,var(--paper-aged),var(--paper-worn));color:var(--text-on-paper-soft);padding:10px 14px;border-radius:1px;font-family:var(--font-mark);font-size:var(--size-micro);line-height:1.5;letter-spacing:.02em;box-shadow:inset 0 1px 4px rgba(0,0,0,.35)}

/* mono ledger rows — case-file facts */
.marklist{font-family:var(--font-mark);font-size:var(--size-micro);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-on-paper-soft);display:flex;flex-direction:column;gap:14px}
.marklist-dark{color:var(--text-muted);gap:12px}

/* a single cabinet drawer face — dark panel, plate, pull */
details.drawer{max-width:820px}
details.drawer summary{list-style:none;position:relative;background:linear-gradient(180deg,var(--ink-panel),var(--ink-cabinet));border:1px solid rgba(0,0,0,.6);box-shadow:inset 0 1px 0 rgba(237,230,217,.05);padding:var(--space-6) var(--space-5);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--space-4);transition:box-shadow var(--dur-base) var(--ease-drawer)}
details.drawer summary::-webkit-details-marker{display:none}
details.drawer summary:hover{box-shadow:inset 0 1px 0 rgba(168,124,74,.22),var(--shadow-raise)}
details.drawer summary .plate{width:230px}
details.drawer summary .pull{width:52px;height:20px;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#7a5a2e 0%,#3a2410 100%)}
details.drawer .well{padding:var(--space-5);border-left:1px solid var(--rule-hair);border-right:1px solid var(--rule-hair);border-bottom:1px solid var(--rule-hair);background:rgba(0,0,0,.35)}

/* —— small screens —— */
@media (max-width:760px){
  .page{padding:64px 20px 96px}
  .site-header .bar,.site-footer .bar{padding-left:20px;padding-right:20px}
  .grid-hero,.grid-side,.grid-side-lg,.grid-press,.grid-contact{grid-template-columns:minmax(0,1fr);gap:48px}
  .grid-hero{justify-items:start}
  .grid-hero img{max-width:280px}
}