:root{
  --paper:#f4eee1; --desk:#e7ddca; --ink:#2a2420; --body:#4a4238;
  --rust:#8a3324; --rust-dk:#5f2317; --gold:#9c7a2e; --muted:#766b5a; --faint:#8f8368;
  --rule:#d8cfbc; --rule-lt:#eee3d0; --panel:#faf7ef;
  --ok-bg:#e9f0e2; --ok-fg:#4a6340; --med-bg:#f5ecd6; --med-fg:#7a5c26; --err:#c98a6a;
  --serif:'Noto Serif','Noto Serif Hebrew',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  /* paper grain: fractal-noise SVG, ~5% so it reads as texture, not dirt */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--desk) var(--grain);color:var(--ink);font-family:var(--serif);line-height:1.5}
a{color:var(--rust)}
a:hover{color:var(--rust-dk)}
:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
h1,h2,p{margin:0}

/* the central "page" floating on the desk, with a grainy drop shadow -
   a silhouette blurred, dithered by noise, and placed behind the sheet so
   it reads as toner settling into the desk rather than a smooth CSS blur */
/* clip, because the shadow below is deliberately 30px wider than the sheet on
   each side. Once the viewport is narrower than the 1040px page, the sheet
   fills it and that overhang becomes 30px of horizontal page scroll - at every
   width under desktop, not just on phones. Clipping it costs nothing: the
   spill is decorative and only reads at all when there is desk visible beside
   the page. overflow-x:clip rather than hidden - hidden would force overflow-y
   to auto and make .stage a scroll container. */
/* Removed from the page, kept in the accessibility tree. display:none would
   take it out of both, which is the opposite of what a hidden heading is for. */
.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Skip link. Off-screen until focused, then the first thing a keyboard user
   lands on. Positioned rather than display:none - a hidden element is not
   focusable, which would defeat the point. */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 18px;background:var(--ink);color:var(--paper);
  font:500 14px var(--serif);text-decoration:none;border-radius:0 0 4px 0}
.skip-link:focus{left:0}

/* Mobile menu. A <details> rather than a scripted dropdown: the landing page
   ships no JavaScript at all, and the CSP allows no inline script, so a
   disclosure widget is both the smallest and the only zero-cost option. It is
   keyboard operable and announced as expandable without any ARIA. */
.mnav{display:none;position:relative}
.mnav>summary{
  list-style:none;cursor:pointer;padding:6px;margin:-6px;border-radius:4px;
  color:var(--ink);display:flex;align-items:center}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary:focus-visible{outline:2px solid var(--rust);outline-offset:2px}
.mnav-links{
  position:absolute;right:0;top:calc(100% + 10px);z-index:20;min-width:190px;
  display:flex;flex-direction:column;
  background:var(--paper) var(--grain);border:1px solid var(--rule);
  border-radius:4px;box-shadow:0 6px 24px rgba(42,36,32,.14);padding:6px}
.mnav-links a{
  padding:10px 12px;border-radius:3px;text-decoration:none;
  font:400 15px var(--serif);color:var(--body)}
.mnav-links a:hover{background:var(--panel);color:var(--ink)}

.stage{position:relative;overflow-x:clip}
.stage::before{content:"";position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  width:1100px;max-width:calc(100% + 60px);background:#2a2420;filter:url(#grain-shadow);z-index:0}
.page{position:relative;z-index:1;max-width:1040px;margin:0 auto;background:var(--paper) var(--grain);
  border:1px solid var(--rule)}
/* fallback for engines without SVG filter support */
@supports not (filter:url(#grain-shadow)){
  .stage::before{display:none}
  .page{box-shadow:0 8px 40px rgba(42,36,32,.10),0 24px 80px rgba(42,36,32,.08)}
}
@media (prefers-reduced-transparency:reduce){
  .stage::before{display:none}
  .page{box-shadow:0 8px 40px rgba(42,36,32,.12)}
}
section, .hero, .masthead{padding:72px 80px;border-bottom:1px solid var(--rule)}

/* masthead */
.masthead{display:flex;justify-content:space-between;align-items:center;padding:22px 80px}
.brand{display:flex;align-items:center;gap:13px}
.brand .wordmark{font:700 18px var(--serif);letter-spacing:.02em}
.nav{display:flex;gap:30px;font:500 14px var(--serif);color:var(--muted)}
.nav a{text-decoration:none;color:inherit;transition:color .15s}
.nav a:hover{color:var(--ink)}

/* hero */
.hero{text-align:center;border-bottom:3px double rgba(42,36,32,.4);position:relative;padding:110px 80px 92px}
.hero .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 620px 340px at 50% 38%,rgba(154,115,46,.09),transparent 70%)}
.hero-inner{position:relative}
/* The title is cut into the sheet and lifted off it at the same time: the two
   crisp 1px shadows describe the edge (dark up-left, lit down-right, no blur,
   so it reads as a cut rather than a smudge), and the wide low-alpha one puts
   the whole line above the paper - the same relationship the sheet has to the
   desk, expressed in text-shadow rather than a filter.
   text-shadow rather than a second copy of the string: no duplicated text in
   the DOM, nothing to hide from a screen reader, and nothing to fall back
   from. The face lifts to #3d362e so the relief has something to read
   against; that is still 10.3:1 on paper, above AAA. */
.hero h1{font:400 clamp(34px,5vw,56px)/1.32 var(--serif);max-width:720px;margin:0 auto 22px;
  color:#3d362e;
  text-shadow:-1px -1px 0 rgba(42,36,32,.40),
               1px  1px 0 rgba(255,255,255,.95),
               0    6px 10px rgba(42,36,32,.16)}
.hero .attrib{font:italic 400 17px var(--serif);color:var(--rust);margin-bottom:44px}
.hero .lede-strong{font:500 clamp(20px,2.6vw,24px)/1.4 var(--serif);margin-bottom:24px}
.hero .lede{font:400 18px/1.65 var(--serif);max-width:640px;margin:0 auto 40px;color:var(--body)}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{font:500 15px var(--serif);padding:15px 28px;border-radius:2px;text-decoration:none;cursor:pointer;border:1px solid transparent;display:inline-block}
.btn-primary{background:var(--rust);color:var(--paper)}
.btn-primary:hover{background:var(--rust-dk);color:var(--paper)}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{color:var(--paper);opacity:.92}
.btn-ghost{background:none;border-color:var(--ink);color:var(--ink)}
.btn-ghost:hover{color:var(--ink);background:rgba(42,36,32,.04)}

/* section eyebrow */
/* A section title, marked up as one. It reads as a small label, but it is the
   heading for everything under it - as a <div> the document outline went
   straight from the h1 to a flat run of h3s with nothing between them.
   margin:0 0 24px because <h2> brings a UA top margin the <div> never had. */
.eyebrow{font:600 12px var(--serif);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 24px}

/* ways to study - icon beside title */
.ways-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
.way{background:var(--paper) var(--grain);padding:28px 30px}
.way-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.way-head svg{flex:none}
.way-head h3{font:600 16px var(--serif);color:var(--ink);margin:0}
.way p{font:400 15px/1.6 var(--serif);margin:0;color:var(--body)}

/* trust triad */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);padding:0}
.triad-wrap{padding:72px 80px;border-bottom:1px solid var(--rule)}
.pillar{background:var(--paper) var(--grain);padding:30px 32px}
.pillar h3{font:600 12px var(--serif);letter-spacing:.07em;text-transform:uppercase;color:var(--rust);margin:0 0 12px}
.pillar p{font:400 15px/1.6 var(--serif);margin:0;color:var(--body)}

/* why - scripture vs commentary */
.why-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:38px}
.why-ref{font:600 12px var(--serif);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.why-quote{font:italic 400 21px/1.45 var(--serif);color:var(--rust);margin:0 0 14px;text-indent:-.5em}
.why-body{font:400 15.5px/1.65 var(--serif);margin:0;color:var(--body)}
.tint{background:rgba(42,36,32,.014)}

/* worked example */
.we-turn{margin-bottom:40px}
.we-turn:last-of-type{margin-bottom:0}
.we-row{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start;margin-top:16px}
.we-q{font:italic 400 18px/1.55 var(--serif);color:var(--body);margin:0 0 16px}
.we-a{background:var(--panel) var(--grain);border-left:3px solid var(--rust);padding:18px 22px;
  font:400 16px/1.7 var(--serif);color:var(--ink);box-shadow:0 1px 3px rgba(42,36,32,.06)}
.we-a strong{font-weight:600}
.grc{font-family:var(--serif)}
.heb{font-family:'Noto Serif Hebrew',var(--serif)}
.panel-ink{background:var(--ink);border-radius:4px;padding:22px 24px;font:400 13.5px/1.8 var(--mono);
  color:#e8dfc9;box-shadow:inset 0 1px 4px rgba(0,0,0,.35);position:relative;
  /* These hold monospace strings with no break opportunity - an attestation
     list (NA28+NA27+Tyn+...) and JSON indented with non-breaking spaces - so
     they need somewhere to go on a phone.
     NOT overflow-x:auto: any non-visible overflow on one axis computes the
     other to auto, and .panel-ink::after (the grain shadow) deliberately sits
     10px BELOW the panel, so the panel gained a vertical scrollbar on every
     ink block. Wrapping the long tokens instead keeps the shadow outside where
     it belongs and leaves nothing to scroll.
     min-width:0 stays and is the load-bearing half: as a grid child the panel
     would otherwise refuse to shrink below its content and push the page. */
  min-width:0;overflow-wrap:anywhere}
/* grainy shadow beneath each ink panel - ink settling into the paper.
   diffuse, and fading vertically via a gradient source */
.panel-ink::after{content:"";position:absolute;left:6px;right:6px;bottom:-10px;height:48px;
  background:linear-gradient(to bottom,rgba(42,36,32,.85),rgba(42,36,32,0));
  filter:url(#grain-shadow-soft);z-index:-1;pointer-events:none}
.panel-ink .hl{color:#c9a05a}
.panel-ink .dim{color:#948a7a}
.we-note{font:italic 400 14px/1.6 var(--serif);color:var(--muted);margin:28px 0 0;
  padding-top:20px;border-top:1px solid var(--rule)}

/* sample prompt */
.prompt-card{background:var(--panel) var(--grain);border:1px solid var(--rule);border-radius:4px;
  padding:26px 30px;font:400 15px/1.72 var(--serif);color:var(--ink);box-shadow:0 1px 3px rgba(42,36,32,.06)}
.prompt-card .lead-cap{color:var(--rust);font-weight:600}

/* mcp */
.mcp-steps{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.mcp-steps h3{font:600 15px var(--serif);color:var(--ink);margin:0 0 12px}
.mcp-steps ol{margin:0;padding-left:20px}
.mcp-steps li{font:400 15px/1.7 var(--serif);color:var(--body);margin-bottom:8px}
.mcp-note{font:400 13.5px/1.6 var(--serif);color:var(--muted);margin-top:14px}
.mcp-code{margin-top:14px}
.code-label{font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

/* Copy buttons. The wrapper is positioned so the button can sit on the block
   it copies; it is not absolutely positioned inside the block itself, because
   .panel-ink is a scroll-free flow container and an absolute child would move
   with its text. */
.copy-wrap{position:relative}
.copy-btn{
  position:absolute;top:10px;right:10px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:4px;cursor:pointer;
  font:500 11.5px var(--serif);letter-spacing:.02em;
  background:var(--paper);color:var(--muted);
  border:1px solid var(--rule)}
.copy-btn:hover{color:var(--ink);border-color:var(--faint)}
.copy-btn.is-copied{color:var(--ok-fg);border-color:var(--ok-fg);background:var(--ok-bg)}
.copy-btn.is-failed{color:var(--med-fg);border-color:var(--med-fg);background:var(--med-bg)}
/* On the dark ink panels the button has to read against the ink, not the paper.
   :has() rather than a sibling combinator, because the button comes BEFORE the
   panel in source order - it is first so it is reached first by keyboard. */
.copy-wrap > .copy-btn:has(+ .panel-ink){
  background:rgba(244,238,225,.10);color:#cfc6b2;border-color:rgba(232,223,201,.28)}
.copy-wrap > .copy-btn:has(+ .panel-ink):hover{background:rgba(244,238,225,.18);color:#f4eee1}

/* The config snippet is a real <pre> so that what is copied is what is shown -
   <br> does not survive textContent, so the old markup copied one long line.
   The <pre> is INSIDE the panel rather than being the panel, because the
   scroll has to live on an element with no ::after: any non-visible overflow
   on one axis computes the other to auto, and .panel-ink::after (the grain
   shadow) deliberately sits 10px below the panel, so a scrolling .panel-ink
   grows a vertical scrollbar to reach its own shadow. Same trap as the ink
   panels on the worked example - it is easy to walk back into. */
.panel-ink > pre{margin:0;white-space:pre;overflow-x:auto}

/* Leave room for the button so it never lands on the first line of text. */
.prompt-card{padding-right:104px}

/* questions - hairline-separated rows, same device as the corpus list below,
   so the two reference sections at the foot of the page read as a pair */
.faq{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.faq-item{padding:22px 0;border-bottom:1px solid var(--rule)}
.faq-item h3{font:600 16px/1.4 var(--serif);color:var(--ink);margin:0 0 8px}
.faq-item p{font:400 15px/1.75 var(--serif);color:var(--body);margin:0;max-width:74ch}

/* corpus */
/* Why these editions and not others (T52). Sits above the list so the
   licence column below reads as a consequence of a stated rule rather
   than as trivia. */
.corpus-note{font:400 16px/1.65 var(--serif);color:var(--body);max-width:760px;margin:0 0 28px}
.corpus-list{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.corpus-row{display:flex;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule);font:400 15px var(--serif)}
.corpus-row .lic{color:var(--muted);white-space:nowrap}
.corpus-row a{text-decoration:none}
.corpus-row a:hover{text-decoration:underline}

/* footer */
.foot{padding:40px 80px 56px;max-width:1040px;margin:0 auto}
.foot-contact{display:flex;gap:22px;flex-wrap:wrap;align-items:center;font:500 14px var(--serif);margin-bottom:16px}
.foot-contact a{text-decoration:none}
.foot-contact a:hover{text-decoration:underline}
.foot-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  padding-top:18px;border-top:1px solid var(--rule);font:400 13px var(--serif);color:var(--muted)}

@media (max-width:820px){
  .masthead,.hero,section,.triad-wrap,.foot{padding-left:28px;padding-right:28px}
  /* 72px of air above the quote is right when it opens a full page; on a phone
     it is most of the first screen spent on nothing. */
  .hero{padding-top:24px}
  /* The relief is specified in pixels but the type is not: clamp() bottoms out
     at 34px around here, so the same 1px edge is proportionally more than
     twice as strong as it is at 56px, and the 6px cast turns from a lift into
     a blur. Keep the cut, drop the float, and ease the dark. */
  .hero h1{text-shadow:-1px -1px 0 rgba(42,36,32,.30), 1px 1px 0 rgba(255,255,255,.9)}
  .nav{display:none}
  .mnav{display:block}
  /* .we-row is the grid here - .we-turn is its non-grid wrapper, so listing
     the wrapper left the answer/panel split two-column at every width and
     the ink panels overflowed the page. */
  .ways-grid,.triad,.why-grid,.we-row,.mcp-steps{grid-template-columns:1fr}
  .we-row{gap:20px}
  /* Grid and flex children default to min-width:auto, which means "never
     shrink below my content". Any long token then widens the whole page. */
  .we-row>*,.mcp-steps>*,.ways-grid>*,.why-grid>*{min-width:0}
}

/* Phones. The page padding and the monospace panels are the two things that
   stop fitting first; 320px (iPhone SE) is the width being held. */
@media (max-width:520px){
  .masthead,.hero,section,.triad-wrap,.foot{padding-left:20px;padding-right:20px}
  .panel-ink{padding:16px 18px;font-size:12.5px}
  .panel-url{font-size:13.5px;overflow-wrap:anywhere}
  .cta-row{flex-wrap:wrap}
  .btn{width:100%;text-align:center}
  /* The licence sits opposite its source on one line, held together by
     white-space:nowrap. There is no room for both columns on a phone, and
     nowrap means the row cannot wrap out of the problem - it just widens the
     page. Stack them and let the licence break normally. */
  .corpus-row{flex-direction:column;gap:2px}
  .corpus-row .lic{white-space:normal;font-size:13.5px}
}
/* Someone who has asked the OS for more contrast wants the ink, not the
   relief - so give them the full-strength colour and no shadow at all. */
@media (prefers-contrast:more){
  .hero h1{color:var(--ink);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* --- classes replacing former inline style attributes (CSP: no 'unsafe-inline') --- */
.svg-defs{position:absolute;width:0;height:0}
.lede-narrow{max-width:760px}
.spacer-16{height:16px}
.spacer-18{height:18px}
.mcp-what{font:400 15.5px/1.7 var(--serif);color:var(--body);margin:0 0 18px}
.panel-url{font-size:15px}
.foot-name{color:var(--ink);font-weight:600}


/* extra breathing room above the second code block in the MCP section */
.code-label-spaced{margin-top:30px}