/* ============================================================
   Pentinian case study system. Calm, paper, ink, sage + clay.
   Shared by every /work case study page. Per-page accent via --accent.
   ============================================================ */
:root{
  --paper:#F1ECE1; --paper-2:#E8E2D4; --bone:#FAF7EF; --oat:#E3DAC7;
  --ink:#23251E; --ink-2:#5B5C51; --ink-3:#8E8D7F;
  --line:rgba(35,37,30,.12); --line-2:rgba(35,37,30,.22); --line-3:rgba(35,37,30,.34);
  --sage:#7E9270; --sage-deep:#5E7355; --sage-soft:#AFC0A0; --clay:#B0805C; --clay-deep:#8C5E3E; --haze:#93A6AC;
  --accent:#5E7355; --accent-soft:rgba(94,115,85,.12);
  --serif:'Newsreader',Georgia,serif; --sans:'Inter',system-ui,sans-serif; --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden}
::selection{background:rgba(126,146,112,.3)}
a{color:inherit}
.wrap{max-width:1080px; margin:0 auto; padding:0 34px}

/* nav */
.cs-nav{position:fixed; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; gap:20px; padding:16px 34px; transition:.4s; border-bottom:1px solid transparent}
.cs-nav.solid{background:rgba(241,236,225,.84); backdrop-filter:blur(10px); border-color:var(--line); padding:12px 34px}
.cs-nav .logo{display:flex; align-items:center; gap:9px; font:600 12.5px/1 var(--sans); letter-spacing:.26em; text-transform:uppercase; color:var(--ink); text-decoration:none}
.cs-nav .logo svg{width:19px; height:19px}
.cs-nav .back{margin-left:auto; font:500 11.5px/1 var(--sans); letter-spacing:.04em; color:var(--ink-2); text-decoration:none; display:flex; align-items:center; gap:7px; transition:color .2s}
.cs-nav .back:hover{color:var(--ink)}

/* ============ HERO ============ */
.cs-hero{position:relative; padding:150px 0 40px; overflow:hidden}
.cs-hero::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:100vw; height:620px; z-index:-1; pointer-events:none;
  background:radial-gradient(44% 46% at 28% 2%,var(--accent-soft),transparent 66%),radial-gradient(40% 42% at 84% 0%,rgba(176,128,92,.10),transparent 70%),radial-gradient(56% 48% at 60% -8%,rgba(147,166,172,.10),transparent 72%);
  -webkit-mask:linear-gradient(180deg,#000,#000 30%,transparent 92%); mask:linear-gradient(180deg,#000,#000 30%,transparent 92%)}
.cs-eyebrow{font:500 11px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--accent); display:flex; gap:10px; align-items:center}
.cs-eyebrow .num{color:var(--ink-3)}
.cs-title{font:300 clamp(46px,7vw,92px)/0.97 var(--serif); letter-spacing:-.025em; color:var(--ink); margin:16px 0 0; text-shadow:0 1px 0 rgba(255,255,255,.5)}
.cs-title .lite{color:var(--ink-3)}
.cs-thesis{font:300 clamp(19px,2.3vw,26px)/1.5 var(--serif); color:var(--ink); max-width:30ch; margin:18px 0 0; letter-spacing:-.005em}
.cs-lede{font-size:15.5px; line-height:1.68; color:var(--ink-2); max-width:62ch; margin:24px 0 0}
.cs-meta{display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; margin:40px 0 0}
.cs-meta div{background:var(--bone); padding:14px 16px}
.cs-meta dt{font:500 9.5px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0}
.cs-meta dd{margin:8px 0 0; font:400 13px/1.4 var(--sans); color:var(--ink)}
.cs-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:26px 30px; margin:38px 0 0; padding:26px 0 0; border-top:1px solid var(--line-2)}
.cs-stat .n{font:300 clamp(30px,4vw,44px)/1 var(--serif); color:var(--ink); letter-spacing:-.01em}
.cs-stat .n em{font-style:normal; color:var(--accent)}
.cs-stat .l{margin-top:9px; font:500 10.5px/1.4 var(--sans); letter-spacing:.04em; color:var(--ink-3)}

/* ============ SECTIONS ============ */
.cs-section{padding:72px 0; position:relative}
.cs-section.alt{background:linear-gradient(180deg,transparent,rgba(250,247,239,.6) 12%,rgba(250,247,239,.6) 88%,transparent); }
.cs-sec-head{display:flex; align-items:baseline; gap:16px; margin:0 0 34px}
.cs-sec-head .k{font:500 10.5px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.cs-sec-head h2{font:400 clamp(24px,3vw,34px)/1.1 var(--serif); color:var(--ink); margin:0; letter-spacing:-.01em}
.cs-sec-head .ln{flex:1; height:1px; background:var(--line); align-self:center}
.cs-prose{max-width:64ch; font-size:15.5px; line-height:1.72; color:var(--ink-2)}
.cs-prose p{margin:0 0 18px}
.cs-prose p:last-child{margin-bottom:0}
.cs-prose b, .cs-prose strong{color:var(--ink); font-weight:600}

/* pull quote / build note */
.cs-quote{margin:34px 0; padding:22px 26px; border-left:2px solid var(--accent); background:rgba(250,247,239,.7); border-radius:0 8px 8px 0}
.cs-quote p{font:300 clamp(19px,2.2vw,24px)/1.42 var(--serif); color:var(--ink); margin:0; letter-spacing:-.005em}
.cs-quote cite{display:block; margin-top:12px; font:500 10px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-style:normal}

/* numbered build cards (D2) */
.cs-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.cs-card{background:var(--bone); padding:26px 26px 24px; position:relative; transition:background .3s ease, transform .3s ease}
.cs-card:hover{background:#fff}
.cs-card .idx{font:500 10px/1 var(--mono); letter-spacing:.1em; color:var(--accent)}
.cs-card h3{font:400 19px/1.25 var(--serif); color:var(--ink); margin:14px 0 10px; letter-spacing:-.01em}
.cs-card p{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0}
.cs-card .tag{margin-top:14px; font:500 9.5px/1.5 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
@media (max-width:760px){ .cs-cards{grid-template-columns:1fr} .cs-meta{grid-template-columns:1fr 1fr} }

/* hood blocks */
.cs-hood{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden; margin-top:8px}
.cs-block{background:var(--bone); padding:26px 28px}
.cs-block .bh{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 14px; padding-bottom:12px; border-bottom:1px solid var(--line)}
.cs-block .bh b{font:500 14.5px/1.2 var(--sans); color:var(--ink)}
.cs-block .bh span{font:500 9.5px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.cs-block p{font-size:14px; line-height:1.68; color:var(--ink-2); margin:0 0 14px}
.cs-block p:last-child{margin-bottom:0}
.cs-block ul{margin:0; padding:0; list-style:none}
.cs-block li{position:relative; padding:9px 0 9px 18px; font-size:13.5px; line-height:1.55; color:var(--ink-2); border-top:1px solid var(--line)}
.cs-block li:first-child{border-top:0}
.cs-block li::before{content:""; position:absolute; left:0; top:16px; width:5px; height:5px; border-radius:50%; background:var(--accent)}
.cs-block code, .cs-prose code, .cs-card code{font:400 12px/1.4 var(--mono); background:var(--accent-soft); color:var(--ink); padding:1px 5px; border-radius:3px}

/* swatches */
.cs-swatches{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-top:8px}
.cs-sw{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bone)}
.cs-sw .chip{height:56px}
.cs-sw .m{padding:11px 13px}
.cs-sw .m b{display:block; font:500 12px/1.2 var(--sans); color:var(--ink)}
.cs-sw .m span{font:400 10.5px/1.4 var(--mono); color:var(--ink-3)}

/* economics table */
.cs-table{width:100%; border-collapse:collapse; font-size:13.5px}
.cs-table th{text-align:left; font:500 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:0 14px 12px; border-bottom:1px solid var(--line-2)}
.cs-table td{padding:15px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); line-height:1.5; vertical-align:top}
.cs-table td:first-child{color:var(--ink); font-weight:500; width:34%}
.cs-table td:last-child{text-align:right; font-family:var(--mono); color:var(--ink); white-space:nowrap}
.cs-table tr:last-child td{border-bottom:0}
.cs-note{margin-top:18px; font-size:13px; line-height:1.65; color:var(--ink-3)}
.cs-note b{color:var(--ink-2)}
.cs-reserved{margin-top:22px; padding:18px 22px; border:1px dashed var(--line-2); border-radius:8px; font-size:13.5px; line-height:1.6; color:var(--ink-2)}
.cs-reserved b{color:var(--ink)}
/* The economics table is the only component on these pages whose min-content
   width is wider than a phone. Measured on live 2026-10-06 at 390: available
   width inside .wrap is 322px, and the tables wanted 325px (colophon) to 379px
   (caveman). Two cells of padding and a nowrap money column are the whole
   difference, and both are desktop luxuries:
     3 columns x 28px of horizontal cell padding = 84px, of which the outer
     edges duplicate .wrap's own 34px gutters;
     td:last-child white-space:nowrap makes "$5,167 to $5,407" an unbreakable
     115px, which is 36% of the width available for all three columns.
   Right alignment, the mono face and the column order are untouched: only the
   permission to break a long figure changes, and only below 560px, where no
   table on the site has room to refuse. */
@media (max-width:560px){
  .cs-table{font-size:13px}
  .cs-table th{padding:0 9px 12px}
  .cs-table td{padding:14px 9px}
  .cs-table th:first-child, .cs-table td:first-child{padding-left:0; width:34%}
  .cs-table th:last-child, .cs-table td:last-child{padding-right:0}
  .cs-table td:last-child{white-space:normal}
}

/* outcomes + edges */
.cs-out{display:grid; grid-template-columns:repeat(2,1fr); gap:26px 40px}
.cs-out .o{border-top:1px solid var(--line-2); padding-top:16px}
.cs-out .o .oi{font:500 10px/1 var(--mono); letter-spacing:.1em; color:var(--accent)}
.cs-out .o h3{font:400 17px/1.3 var(--serif); color:var(--ink); margin:12px 0 8px}
.cs-out .o p{font-size:13.5px; line-height:1.6; color:var(--ink-2); margin:0}
.cs-edges{max-width:66ch}
.cs-edges .e{padding:16px 0; border-top:1px solid var(--line)}
.cs-edges .e:first-child{border-top:0}
.cs-edges .e b{color:var(--ink); font-weight:600}
.cs-edges .e p{font-size:14px; line-height:1.6; color:var(--ink-2); margin:6px 0 0}
@media (max-width:760px){ .cs-out{grid-template-columns:1fr} }

.cs-prov{font-size:12.5px; line-height:1.7; color:var(--ink-3); max-width:70ch; padding-top:26px; border-top:1px solid var(--line)}
.cs-prov b{color:var(--ink-2)}

/* ============ EVIDENCE: pictures of the work ============
   A case study for a design studio with no picture of the work is asking a
   prospect to take the writing on faith. These studies ran 11k to 16k
   characters each with img=0 across all six, which is the one thing that made
   them unshippable to a prospect.

   The figure is deliberately plain: a frame, the shot, and a caption that says
   what it is and where it came from. No device mockup, no perspective tilt, no
   drop shadow pretending to be a laptop. The work is the subject and a chrome
   dressing would be the studio talking about itself instead.

   Provenance is part of the component, not an afterthought, because a shot of
   a DEV domain and a shot of a live storefront are different claims and a
   reader cannot tell them apart by looking. */
.cs-figs{display:grid; gap:30px; margin:0 0 6px}
/* Two abreast only where a phone shot can sit beside its desktop sibling
   without either being decorative. Below that they stack, widest first. */
.cs-fig-pair{display:grid; grid-template-columns:minmax(0,2.15fr) minmax(0,1fr);
  gap:20px; align-items:start}
@media (max-width:760px){ .cs-fig-pair{grid-template-columns:1fr} }

.cs-fig{margin:0; min-width:0}
.cs-fig .shot{display:block; position:relative; border:1px solid var(--line-2);
  border-radius:9px; overflow:hidden; background:var(--paper-2, #E8E2D4)}
.cs-fig img{display:block; width:100%; height:auto}
.cs-fig figcaption{margin-top:11px; display:flex; align-items:baseline;
  gap:10px; flex-wrap:wrap; font-size:13px; line-height:1.55; color:var(--ink-2)}
.cs-fig figcaption b{font-weight:400; color:var(--ink)}
/* The width the frame was taken at, so "it works on a phone" is a measurement
   a reader can check rather than a claim. */
.cs-fig .at{margin-left:auto; font:500 9.5px/1 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3); white-space:nowrap}
/* A dev-domain shot is labeled on the picture itself. In a caption it travels
   badly: the frame gets screenshotted into a deck and the qualifier is lost. */
.cs-fig .dev{position:absolute; left:10px; top:10px; z-index:2;
  font:500 8.5px/1 var(--mono); letter-spacing:.13em; text-transform:uppercase;
  color:#fff; background:rgba(35,37,30,.78); padding:6px 9px; border-radius:3px}

/* footer index */
.cs-foot{border-top:1px solid var(--line); margin-top:20px; padding:40px 0}
.cs-foot .fh{font:500 11px/1 var(--sans); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:20px}
.cs-index{display:flex; flex-wrap:wrap; gap:8px 10px}
.cs-index a{font:500 11px/1 var(--mono); letter-spacing:.04em; color:var(--ink-2); text-decoration:none; border:1px solid var(--line-2); border-radius:999px; padding:9px 13px; transition:.2s}
.cs-index a:hover{border-color:var(--sage); color:var(--ink)}
.cs-index a.here{background:var(--sage); border-color:var(--sage); color:#fff}
.cs-index a.locked{opacity:.5; border-style:dashed; pointer-events:none}
/* The word is decoration on a state, so it lives with the state. Unlocking is
   then only removing a class, never editing text. */
.cs-index a.locked::after{content:" · private"}

/* The reveal grammar lives in motion.css, shared with every page on the site;
   the studies bring nothing of their own but their reduced-motion answer for
   the decorations below. A study is read rather than glanced at, and if the
   shared timing ever feels wrong here, the correction belongs in the grammar,
   not in a local exception, and a local exception is how this file came to hide
   ten thousand characters behind a class the Foyer used to mean something else. */
@media (prefers-reduced-motion:reduce){ *{animation:none!important} }

/* ============ P007, THE 44px FLOOR, Pen 2026-10-06 ============
   Verbatim: "small tap targets: pad them to 44 under 480, footer index, back
   link, logo, and card 06's compose row." This file carries three of the four.
   Scoped to 480 because that is the width she named, by width and not by
   pointer, so a desktop browser narrowed to 390 shows her the same thing a
   phone gets. She judges this site live.

   TWO DIFFERENT MECHANISMS, because she asked for two different things.

   The footer index GROWS. Its pills go 31px to 44px and the footer gets taller,
   which is the variant B she judged on the 2026-10-06 board (tap-B-390.png) and
   approved. Drawn text is untouched: same font, same 11px line, same 13px side
   padding, same pill radius. Only the vertical padding moves, 9px to 15.5px,
   which is 11 + 31 + 2 = 44 with the border. Measured at 390: 31.0 -> 44.0 on
   all six links, and the footer grows by 13px per wrapped ROW rather than by
   one figure, which is why the six pages split:

     artinian, caveman, studiolo, colophon   260 -> 312   +52, four rows
     limicon, unimpact                       221 -> 260   +39, three rows

   The split is not a bug and it is worth knowing before reading a screenshot:
   `.cs-index a.locked::after` appends " · private" to every entry that is not
   released, and the current page's entry carries `.here` instead, so each page
   has a different total pill width and wraps at a different count. p01's board
   measured the +52 case and Pen approved that shot.

   The back link and the logo DO NOT GROW. Pen: "pad the anchor's hit area only,
   no visual change." They sit in a fixed bar 52px tall over the hero, so a
   44px drawn box would push that bar to 76px and eat 24px of a phone screen
   above her drawing. Instead they take the reach the home page already uses on
   its own nav links and hero chips (index.html, the FINGERS block): a
   transparent `::before`, absolutely positioned, inset by negative halves. It
   paints nothing, it is not a flex item, and the bar stays 52px at both widths.
   Measured at 390: logo 19.0 drawn with a 44.0 hit box, back 11.5 drawn with a
   44.0 hit box, `.cs-nav` 52.0 -> 52.0.

   `calc((100% - 44px) / 2)` rather than a hard -12.5px: the two anchors are
   different heights (19 and 11.5) and the logo's height is set by its svg, so a
   literal inset would need two values and would silently go wrong the day
   either changes. The reach stays horizontally flush (the `0`), because the
   logo is at the left edge and the back link at the right, and widening either
   sideways would put a hit area over the gap between them for no gain.

   The six private entries keep `pointer-events:none`, so they are padded and
   still inert. That is correct and it is not an oversight: a private study is
   not tappable until it is released, and the row has to read as one row. A
   probe that hit-tests them reads their parent, by design. */
@media (max-width:480px){
  .cs-index a{padding:15.5px 13px}
  .cs-nav .logo, .cs-nav .back{position:relative}
  .cs-nav .logo::before, .cs-nav .back::before{content:""; position:absolute;
    inset:calc((100% - 44px) / 2) 0}
}