/* theseunlijoka — shared stylesheet for all pages.
   Layout: a stack of full-width colour bands, each tinted by a commodity (cocoa, sesame, cashew, soya),
   with one reading column inside every band. Photos sit on offset colour blocks. */

:root{
  color-scheme:light;
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  --paper:#FDFCFA;        /* near-white */
  --paper-2:#F6F4F0;
  --ink:#2E1A10;          /* cocoa text */
  --ink-2:#6B5244;
  --rule:#E0D3BD;
  --cocoa:#3B2314;        /* dark band */
  --cocoa-2:#4E3020;
  --cocoa-fg:#FBF6EC;
  --cocoa-fg-2:#D6C2AC;
  --cocoa-rule:#6A4A36;
  --pod:#E8941F;          /* ripe cocoa pod amber */
  --pod-ink:#9A5E0C;
  --pod-soft:#FCE8C9;
  --sesame:#E9C878;       /* sesame gold */
  --sesame-ink:#8C6A1E;
  --sesame-soft:#F7ECD1;
  --cashew:#D9512F;       /* cashew apple coral */
  --cashew-ink:#A83A1E;
  --cashew-soft:#FBE4DC;
  --soya:#5E9C3C;         /* soya green */
  --soya-ink:#3C6F27;
  --soya-soft:#E6F0DA;
  --display:"Bricolage Grotesque","Archivo Narrow","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SFMono-Regular",Menlo,Consolas,monospace;
}
/* Dark mode no longer follows the visitor's device setting automatically —
   the site should look the same (light) for everyone. The rule below stays
   available in case a manual theme toggle is ever added; it only applies
   when something sets data-theme="dark" on the page, which nothing does. */
:root[data-theme="dark"]{
  --paper:#15100C; --paper-2:#1F1711; --ink:#F3EBDF; --ink-2:#BDAA97; --rule:#3C2E24;
  --cocoa:#241811; --cocoa-2:#312218; --cocoa-fg:#F3EBDF; --cocoa-fg-2:#C9B49E; --cocoa-rule:#4F3A2C;
  --pod:#F0A23A; --pod-ink:#F0B35A; --pod-soft:#2E2113;
  --sesame:#E9C878; --sesame-ink:#E6CB84; --sesame-soft:#2A2316;
  --cashew:#F06A47; --cashew-ink:#F2836A; --cashew-soft:#30201A;
  --soya:#7DBF5A; --soya-ink:#8FCB70; --soya-soft:#1B2717;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none !important} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
[hidden]{display:none !important}
.wrap{
  max-width:1040px; margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
.band{padding-block:4.75rem}
.band.cocoa{background:var(--cocoa); color:var(--cocoa-fg)}
.band.soya{background:var(--paper)}
.band.sesame{background:var(--paper)}
.band.cashew{background:var(--paper)}
.band.hero-band{padding-block:0 3.5rem}
.band.page-band{padding-block:0 3rem}
.band:not(.cocoa) + .band:not(.cocoa){border-top:1px solid var(--rule)}

a{color:var(--soya-ink); text-decoration-thickness:1px; text-underline-offset:.16em}
a:hover{text-decoration-thickness:2px}
.cocoa a{color:var(--pod)}
a:focus-visible, button:focus-visible{outline:2px solid var(--pod); outline-offset:3px}
h1,h2,h3,h4{font-family:var(--display); font-weight:600; letter-spacing:-.01em; text-wrap:balance; margin:0}
p{margin:0}
.prose{max-width:66ch}
.prose p + p{margin-top:1.1em}

.eyebrow{
  display:flex; align-items:center; gap:.8rem; margin:0;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2);
}
.eyebrow b{font-weight:500; color:var(--pod-ink)}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--rule)}
.eyebrow.plain{display:inline-flex; width:fit-content; gap:.5rem; border:1px solid var(--rule); border-radius:999px; padding:.4rem .9rem .4rem .7rem}
.eyebrow.plain::after{display:none}
.cocoa .eyebrow.plain{border-color:var(--cocoa-rule)}
.eyebrow.c-soya b{color:var(--soya-ink)}
.eyebrow.c-cashew b{color:var(--cashew-ink)}
.eyebrow.c-sesame b{color:var(--sesame-ink)}
.cocoa .eyebrow{color:var(--cocoa-fg-2)}
.cocoa .eyebrow b{color:var(--pod)}
.cocoa .eyebrow::after{background:var(--cocoa-rule)}

/* Masthead */
.masthead{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem 1.5rem;
  padding-block:1.25rem 1rem; border-bottom:1px solid var(--rule);
}
.mark{font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--ink); text-decoration:none; letter-spacing:-.02em}
.mark b{font-weight:700; color:var(--pod-ink)}
.nav{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}
.nav a{color:var(--ink-2); text-decoration:none; padding-block:.2rem}
.nav a:hover{color:var(--pod-ink)}
.nav a[aria-current="page"]{color:var(--pod-ink)}
.cocoa .masthead{border-bottom-color:var(--cocoa-rule)}
.cocoa .mark{color:var(--cocoa-fg)}
.cocoa .mark b{color:var(--pod)}
.cocoa .nav a{color:var(--cocoa-fg-2)}
.cocoa .nav a:hover, .cocoa .nav a[aria-current="page"]{color:var(--pod)}

/* Hero (home only) */
.hero{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr); gap:2.5rem 4rem; align-items:center; padding-top:3rem}
.hero h1{font-size:clamp(2.3rem, 1.1rem + 4.8vw, 4.3rem); line-height:1; font-stretch:85%; font-weight:650; margin-top:1.1rem; color:var(--ink)}
.hero h1 .hl{color:var(--pod-ink); font-style:normal}
.lede{font-size:1.2rem; line-height:1.5; margin-top:1.4rem; max-width:42ch; color:var(--ink-2)}
.cta{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.8rem}
.btn{
  display:inline-block; font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  padding:.8rem 1.4rem; background:var(--pod); color:var(--cocoa); border:1px solid var(--pod); border-radius:999px; transition:background .15s, border-color .15s, color .15s;
}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--rule)}
.btn:hover{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.cocoa .btn.ghost{color:var(--cocoa-fg); border-color:var(--cocoa-fg-2)}
.cocoa .btn:hover{background:var(--cocoa-fg); border-color:var(--cocoa-fg); color:var(--cocoa)}

.photo{margin:0; position:relative; max-width:100%}
.photo img{display:block; width:100%; height:auto; border-radius:14px}
.photo.amber, .photo.coral{box-shadow:0 1px 2px rgba(20,12,6,.06), 0 10px 30px -12px rgba(20,12,6,.22)}
.photo figcaption{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; margin-top:1.6rem; color:var(--ink-2)}
.cocoa .photo figcaption{color:var(--cocoa-fg-2)}
.portrait{margin-right:16px; margin-bottom:16px}

.particulars-row{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap:1.25rem 2.5rem;
  margin:3rem 0 0; padding-top:1.5rem; border-top:1px solid var(--rule);
}
.particulars-row div{min-width:0}
.particulars-row dt{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pod-ink); margin-bottom:.3rem}
.particulars-row dd{margin:0; font-size:.95rem; color:var(--ink)}
.cocoa .particulars-row{border-top-color:var(--cocoa-rule)}
.cocoa .particulars-row dt{color:var(--pod)}
.cocoa .particulars-row dd{color:var(--cocoa-fg)}

/* Page head (every secondary page) */
.pagehead{padding-top:2.25rem; max-width:720px}
.pagehead h1{font-size:clamp(2rem, 1rem + 3vw, 3.2rem); line-height:1.05; font-stretch:88%; font-weight:650; margin-top:.9rem; color:var(--ink); max-width:20ch}
.pagehead .intro{margin-top:1rem; max-width:58ch; color:var(--ink-2); font-size:1.1rem; line-height:1.5}
.cocoa .pagehead h1{color:var(--cocoa-fg)}
.cocoa .pagehead .intro{color:var(--cocoa-fg-2)}

/* Sections */
.section h2{font-size:clamp(1.7rem, 1rem + 2.4vw, 2.6rem); line-height:1.08; font-stretch:90%; margin-top:1rem; max-width:24ch}
.section .prose{margin-top:1.5rem}
.section .intro{margin-top:1.25rem; max-width:62ch; color:var(--ink-2)}
.cocoa .section h2{color:var(--cocoa-fg)}
.cocoa .section .intro{color:var(--cocoa-fg-2)}

/* The gap */
.numbers{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap:0 2.5rem; margin-top:2rem}
.num{border-top:2px solid var(--ink); padding-block:1.2rem 1.4rem; min-width:0}
.num .fig{font-family:var(--display); font-weight:700; font-stretch:80%; font-size:clamp(2.8rem, 1.5rem + 4.5vw, 4.6rem); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.fig.c-soya{color:var(--soya-ink)} .fig.c-cashew{color:var(--cashew-ink)} .fig.c-pod{color:var(--pod-ink)}
.num .lab{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:.6rem}
.num p{margin-top:.5rem; font-size:.96rem; max-width:30ch; color:var(--ink-2)}
.sources{margin-top:1.25rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.04em; color:var(--ink-2); max-width:72ch; line-height:1.7}

/* About */
.about-grid{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:2.5rem 4rem; align-items:start; margin-top:1.5rem}
.about-grid .photo{margin-left:16px; margin-bottom:16px}
.about-grid figcaption{color:var(--ink-2)}

/* Field photographs */
.gallery{display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); grid-auto-rows:150px; gap:.75rem; margin-top:2rem}
.gallery figure{margin:0; position:relative; overflow:hidden; min-width:0; background:var(--paper-2)}
.gallery img{width:100%; height:100%; object-fit:cover; display:block}
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:.55rem .7rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:#FBF6EC; background:linear-gradient(to top, rgba(43,24,14,.85), rgba(43,24,14,0));
}
.g-wide{grid-column:span 4; grid-row:span 2}
.g-tall{grid-column:span 2; grid-row:span 2}
.g-half{grid-column:span 3; grid-row:span 2}
.g-third{grid-column:span 2; grid-row:span 2}
.pull{margin:2rem 0 0; padding:0 0 0 1.2rem; border-left:4px solid var(--pod); max-width:62ch; font-size:1.2rem; line-height:1.45; font-style:italic; color:var(--ink)}
.pull cite{display:block; font-style:normal; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); margin-top:.7rem}

/* Commodities */
.commodities{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap:1.5rem; margin-top:2rem}
.tile{background:var(--paper); border:1px solid var(--rule); min-width:0}
.tile .art{aspect-ratio:1/1; max-width:100%; overflow:hidden; position:relative}
.tile .art img{width:100%; height:100%; object-fit:cover; display:block}
.tile .art .tag{position:absolute; top:.6rem; left:.6rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .5rem; color:#2E1A10}
.tile.t-cocoa .art .tag{background:var(--pod)}
.tile.t-sesame .art .tag{background:var(--sesame)}
.tile.t-cashew .art .tag{background:var(--cashew); color:#FBF6EC}
.tile.t-soya .art .tag{background:var(--soya); color:#FBF6EC}
.tile .txt{padding:1rem 1.1rem 1.25rem}
.tile h3{font-size:1.35rem; line-height:1.1; font-stretch:90%}
.tile.t-cocoa h3{color:var(--pod-ink)} .tile.t-sesame h3{color:var(--sesame-ink)} .tile.t-cashew h3{color:var(--cashew-ink)} .tile.t-soya h3{color:var(--soya-ink)}
.tile p{margin-top:.5rem; font-size:.95rem; color:var(--ink-2)}
.tile .note{margin-top:.6rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2)}

/* Focus and principles, and the home Explore grid */
.grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:2.25rem 3rem; margin-top:2.25rem}
.item{border-top:4px solid var(--ink); padding-top:1rem; min-width:0}
.item.c-pod{border-top-color:var(--pod)} .item.c-soya{border-top-color:var(--soya)} .item.c-cashew{border-top-color:var(--cashew)} .item.c-sesame{border-top-color:var(--sesame)}
.item h3{font-size:1.35rem; line-height:1.15; font-stretch:92%}
.item h3 a{color:inherit; text-decoration:none}
.item h3 a:hover{text-decoration:underline; text-decoration-thickness:2px}
.item p{margin-top:.6rem}
.item .more{display:inline-block; margin-top:.9rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2)}
.terms{margin:.9rem 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem}
.terms li{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); border:1px solid var(--rule); background:var(--paper); padding:.22rem .5rem; white-space:nowrap}

/* Worked example */
.steps{margin:2rem 0 0; padding:0; list-style:none; counter-reset:step; max-width:70ch; border-top:2px solid var(--ink)}
.steps li{counter-increment:step; display:grid; grid-template-columns:2.6rem minmax(0,1fr); gap:0 .8rem; padding:1.05rem 0; border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(step, decimal-leading-zero); font-family:var(--mono); font-size:.78rem; color:var(--pod-ink); padding-top:.3rem; font-variant-numeric:tabular-nums}
.steps h3{font-size:1.2rem; line-height:1.2; font-stretch:92%}
.steps p{margin-top:.35rem}

/* Research lists */
.lists{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap:2rem 3rem; margin-top:2rem}
.list h3{font-family:var(--mono); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--soya-ink); border-bottom:2px solid var(--ink); padding-bottom:.6rem}
.list ul{margin:0; padding:0; list-style:none}
.list li{padding:.7rem 0; border-bottom:1px solid var(--rule); font-size:1rem}
.list li small{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:.2rem}

/* Writing */
.feature{margin-top:2rem; border-top:2px solid var(--ink); padding-top:1.5rem}
.kicker{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--cashew-ink)}
.feature h3{font-size:clamp(1.6rem, 1rem + 2vw, 2.3rem); line-height:1.1; font-stretch:88%; margin-top:.6rem; max-width:26ch}
.standfirst{font-size:1.15rem; line-height:1.45; margin-top:.8rem; max-width:52ch; color:var(--ink-2); font-style:italic}
.feature .body{margin-top:1.6rem; max-width:66ch}
.feature .body h4{font-size:1.1rem; font-stretch:92%; letter-spacing:-.005em; margin:1.7em 0 .45em; color:var(--cashew-ink)}
.feature .body p + p{margin-top:1em}
.feature .meta{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--ink-2); margin-top:1.75rem; line-height:1.8; max-width:72ch}
.eyebrow.gap{margin-top:3rem}
.essays{margin-top:1.5rem; border-top:2px solid var(--ink)}
.essay{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem 2rem; align-items:start; padding-block:1.15rem; border-bottom:1px solid var(--rule)}
.essay h3{font-family:var(--body); font-weight:500; font-style:italic; font-size:1.35rem; line-height:1.25; letter-spacing:0}
.essay p{margin-top:.35rem; color:var(--ink-2); font-size:.98rem; max-width:60ch}
.pill{font-family:var(--mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); background:var(--pod-soft); padding:.32rem .55rem; white-space:nowrap; margin-top:.35rem}

/* Essays: full pieces, collapsed to a standfirst until opened */
.essay-list{margin-top:2rem; border-top:2px solid var(--ink)}
.piece{border-bottom:1px solid var(--rule)}
.piece summary{
  list-style:none; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem 2rem; align-items:start; padding:1.3rem 0;
}
.piece summary::-webkit-details-marker{display:none}
.piece summary:hover h3{color:var(--cashew-ink)}
.piece summary:focus-visible{outline:2px solid var(--pod); outline-offset:4px}
.piece .tags{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cashew-ink)}
.piece h3{font-size:clamp(1.35rem, 1rem + 1.4vw, 1.8rem); line-height:1.12; font-stretch:90%; margin-top:.4rem; transition:color .15s}
.piece .stand{margin-top:.5rem; color:var(--ink-2); font-size:1.02rem; max-width:62ch}
.piece .open{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); border:1px solid var(--ink);
  padding:.45rem .7rem; white-space:nowrap; margin-top:.3rem; align-self:start;
}
.piece[open] .open{background:var(--ink); color:var(--paper)}
.piece .open::after{content:"Read"}
.piece[open] .open::after{content:"Close"}
.piece .body{max-width:66ch; padding:0 0 2rem}
.piece .body p + p{margin-top:1em}
.piece .body h4{font-size:1.08rem; font-stretch:92%; margin:1.6em 0 .4em; color:var(--cashew-ink)}
.piece .body ul{margin:.6em 0 0; padding-left:1.2em}
.piece .body li + li{margin-top:.35em}
.piece .meta{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:1.5rem}
.piece .meta a{text-transform:none; letter-spacing:.04em}

/* Glossary */
.gloss{margin:2rem 0 0; display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:0 3rem; border-top:2px solid var(--ink)}
.gloss > div{display:grid; grid-template-columns:minmax(6.5rem, 8.5rem) minmax(0,1fr); gap:0 1rem; padding:.85rem 0; border-bottom:1px solid var(--rule); min-width:0}
.gloss dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--sesame-ink); padding-top:.3rem}
.gloss dd{margin:0; font-size:.97rem}

/* Record */
.record{margin:2rem 0 0; display:grid; grid-template-columns:minmax(6.5rem, max-content) 1fr; border-top:2px solid var(--ink)}
.record dt, .record dd{margin:0; padding:.95rem 0; border-bottom:1px solid var(--rule); min-width:0}
.record dt{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pod-ink); padding-top:1.15rem; padding-right:1.5rem; font-variant-numeric:tabular-nums}

/* Conversations and contact, on the cocoa band */
.closing{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:3rem 4rem}
.help{margin:1.5rem 0 0; padding:0; list-style:none; border-top:1px solid var(--cocoa-fg-2)}
.help li{padding:.85rem 0; border-bottom:1px solid var(--cocoa-rule)}
.contact{margin-top:1.5rem; border-top:1px solid var(--cocoa-fg-2)}
.c-row{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem; padding-block:1rem; border-bottom:1px solid var(--cocoa-rule)}
.c-label{font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--pod); min-width:6.5rem}
.c-value{font-family:var(--mono); font-size:.95rem; word-break:break-all; min-width:0; color:var(--cocoa-fg)}
.copy{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; cursor:pointer;
  background:transparent; color:var(--cocoa-fg); border:1px solid var(--cocoa-fg-2); padding:.35rem .6rem; margin-left:auto;
}
.copy:hover{background:var(--pod); border-color:var(--pod); color:var(--cocoa)}
.foot{margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--cocoa-rule); display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem; color:var(--cocoa-fg-2); font-size:.92rem}
.foot .mono{font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase}
.foot .mono b{color:var(--pod); font-weight:500}

@media (max-width:760px){
  .hero{grid-template-columns:1fr; gap:2rem; padding-top:2rem}
  .hero .photo{max-width:360px; margin:0 auto}
  .about-grid{grid-template-columns:1fr}
  .about-grid .photo{max-width:360px; margin-left:16px}
  .gallery{grid-template-columns:repeat(2, minmax(0,1fr)); grid-auto-rows:170px}
  .g-wide,.g-tall,.g-half,.g-third{grid-column:span 2; grid-row:span 1}
  .g-wide{grid-row:span 2}
  .g-tall,.g-third{grid-column:span 1}
}
@media (max-width:520px){
  .essay{grid-template-columns:1fr}
  .piece summary{grid-template-columns:1fr}
  .record{grid-template-columns:minmax(5.5rem, max-content) 1fr}
}

/* Teaser cards (writing index links out to full essay pages) */
.teaser-list{margin-top:2rem; border-top:2px solid var(--ink)}
.teaser{padding:1.5rem 0; border-bottom:1px solid var(--rule)}
.teaser .tags{font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--cashew-ink)}
.teaser h3{font-size:clamp(1.35rem, 1rem + 1.4vw, 1.8rem); line-height:1.12; font-stretch:90%; margin-top:.4rem; max-width:36ch}
.teaser h3 a{color:var(--ink); text-decoration:none}
.teaser h3 a:hover{color:var(--cashew-ink); text-decoration:underline; text-decoration-thickness:2px}
.teaser .stand{margin-top:.5rem; color:var(--ink-2); font-size:1.02rem; max-width:62ch}
.teaser .more-link{display:inline-block; margin-top:.8rem; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink)}
.teaser .more-link:hover{color:var(--cashew-ink); border-color:var(--cashew-ink)}
.teaser.featured{border-bottom-width:2px}
.teaser .kicker{display:block; margin-bottom:.2rem}

/* Contact form (on the cocoa band) */
.contact-form{margin-top:1.5rem; max-width:480px}
.form-field{margin-top:1.1rem}
.form-field label{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-fg-2); margin-bottom:.4rem}
.form-field input, .form-field textarea{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--cocoa-fg); background:var(--cocoa-2);
  border:1px solid var(--cocoa-rule); border-radius:10px; padding:.65rem .85rem; resize:vertical;
}
.form-field textarea{min-height:130px}
.form-field input::placeholder, .form-field textarea::placeholder{color:var(--cocoa-fg-2); opacity:.7}
.form-field input:focus, .form-field textarea:focus{outline:2px solid var(--pod); outline-offset:1px; border-color:var(--pod)}
.contact-form .btn{margin-top:1.1rem; border:none; cursor:pointer}
.form-note{margin-top:.8rem; font-size:.85rem; color:var(--cocoa-fg-2)}

/* Market intelligence (About page) */
.market{margin-top:3rem; padding-top:2rem; border-top:2px solid var(--ink)}
.market-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:1.75rem 2.5rem; margin-top:1.5rem}
.market-card{border:1px solid var(--rule); border-radius:14px; padding:1.5rem 1.75rem; background:var(--paper-2); min-width:0}
.market-card h3{font-size:1.02rem; font-stretch:90%}
.market-card .tradingview-widget-container{margin-top:1rem}
.market-card .note{margin-top:.6rem; font-size:.88rem; color:var(--ink-2)}

/* Newsletter signup (light bands) */
.newsletter{margin-top:2.25rem; padding:1.75rem 2rem; border:1px solid var(--rule); border-radius:16px; background:var(--paper-2)}
.newsletter h3{font-size:1.25rem; font-stretch:90%; margin-top:.5rem}
.newsletter > p:not(.eyebrow){margin-top:.5rem; color:var(--ink-2); max-width:48ch}
.newsletter form{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.25rem; align-items:center}
.newsletter input[type="email"]{
  flex:1 1 220px; min-width:0; font-family:var(--body); font-size:1rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:10px; padding:.68rem .9rem;
}
.newsletter input[type="email"]:focus{outline:2px solid var(--pod); outline-offset:1px; border-color:var(--pod)}
.newsletter .btn{white-space:nowrap}

/* Subscribe widget, in the closing cocoa band on every page */
.sub-widget{margin-bottom:2.25rem}
.sub-widget form{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.9rem; align-items:center}
.sub-widget input[type="email"]{
  flex:1 1 220px; min-width:0; font-family:var(--body); font-size:1rem; color:var(--cocoa-fg); background:var(--cocoa-2);
  border:1px solid var(--cocoa-rule); border-radius:10px; padding:.65rem .9rem;
}
.sub-widget input[type="email"]::placeholder{color:var(--cocoa-fg-2); opacity:.7}
.sub-widget input[type="email"]:focus{outline:2px solid var(--pod); outline-offset:1px; border-color:var(--pod)}
.sub-widget .btn{white-space:nowrap}
.contact-cta{margin-bottom:2.25rem}

/* Practice strip and latest-essay teaser (home page) */
.practice-strip{display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap:1.5rem 2rem; margin-top:1.75rem}
.practice-item{display:block; padding:1.5rem 1.75rem; border:1px solid var(--rule); border-radius:14px; background:var(--paper-2); text-decoration:none; transition:border-color .15s, transform .15s}
.practice-item:hover{border-color:var(--pod-ink); transform:translateY(-2px)}
.practice-item .label{display:block; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pod-ink)}
.practice-item .desc{display:block; margin-top:.6rem; color:var(--ink); font-size:1rem; line-height:1.4}
.practice-item .arrow{display:block; margin-top:.9rem; color:var(--ink-2); font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase}
.all-essays-link{display:inline-block; margin-top:1.75rem; font-family:var(--mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--ink)}
.all-essays-link:hover{color:var(--cashew-ink); border-color:var(--cashew-ink)}

/* Essay / article pages */
.backlink{display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--cocoa-fg-2); text-decoration:none; margin-bottom:1rem}
.backlink:hover{color:var(--pod)}
.article-body{max-width:66ch; margin-top:2rem}
.article-body p + p{margin-top:1.1em}
.article-body h4{font-size:1.1rem; font-stretch:92%; margin:1.7em 0 .45em; color:var(--cashew-ink)}
.article-body ul{margin:.6em 0 0; padding-left:1.2em}
.article-body li + li{margin-top:.35em}
.article-meta{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-top:2rem; padding-top:1.5rem; border-top:1px solid var(--rule); line-height:1.8; max-width:66ch}
.article-meta a{text-transform:none; letter-spacing:.04em}