/* =============================================================================
   product-silk-laminate.css — PAGE-UNIQUE CSS for the Silk product page (FC-05, FC-rebuild).
   -----------------------------------------------------------------------------
   Loaded as $page_css (replaces henry_product.css). The shared FC component look +
   typography now lives in www/css/henry_fc.css (loaded after this + henry_coolgray.css) —
   same architecture as the wave pilot (product-foil.css) and smoke tests #1/#2
   (product-suede.css / product-cotton.css).

   This sheet keeps ONLY silk-unique decoration: the "Origin Story" 4-card grid (silk's
   own one-off system section, no shared component — matches the wave's HAND-BUILT-OK
   precedent for a page-specific narrative block, e.g. FC-13's edge-color-system /
   FC-18's thickness-system) + the "Keep Exploring" decorative card-scene skins.
   henry_fc.css already owns the FULL keep-exploring STRUCTURE (.card-scene,
   .business-card box/shadow/shine overlay, .stack-a/.stack-b, .visual-label) — per
   inc/page/keep-exploring.php's contract, only the per-material SKIN (background +
   .mat-mark position/color) is page-owned, so that's all that lives here.

   Silk's keep-exploring correctly labels all 3 tabs (Suede/Cotton/Linen) with the
   matching skin+text — no copy-paste bug like cotton/suede's mockups had. Skins reused
   VERBATIM from the values suede.php's/cotton.php's own product CSS already established
   site-wide for these same materials, for cross-page consistency.

   The prior ~1,100-line copy (the full pre-fc_v2 mockup CSS) is superseded by
   henry_fc.css / henry_coolgray.css — recoverable from git history (this file's
   previous commit) if ever needed for reference.
   ============================================================================= */

/* ---- Origin Story: silk's own one-off 4-card grid (no shared component; page-owned) ---- */
.silk-origin-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:8px}
.silk-origin-card{border:1px solid rgba(201,169,110,.35);border-radius:16px;padding:26px 24px;color:#2A2318}
.silk-origin-card h3{font-size:19px;line-height:1.15;margin:10px 0 8px;color:#1c1710;letter-spacing:-.01em}
.silk-origin-card p{font-size:14.5px;line-height:1.6;color:#4a4030;margin:0}
.so-year{font:800 11px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#9c7c3e}
.so-ladder{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.so-ladder span{font-size:12.5px;font-weight:700;color:#5a4c33;background:rgba(255,255,255,.5);border:1px solid rgba(201,169,110,.4);border-radius:8px;padding:7px 11px}
@media(max-width:1120px){.silk-origin-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.silk-origin-grid{grid-template-columns:1fr}}

/* ---- Keep-Exploring: per-material card-scene skins (page-owned decoration) ---- */
.keep-exploring .mat-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(38px,4.4vw,56px);font-weight:900;letter-spacing:-.06em;z-index:2}

/* Suede — dark, warm, velvet (verbatim from cotton.php's product-cotton.css, the mockup's own definition) */
.keep-exploring .suede-card{background:linear-gradient(150deg,#211f1c 0%,#38332b 60%,#1b1916 100%);border:1px solid rgba(255,255,255,.08)}
.keep-exploring .suede-card .mat-mark{color:#e6dccc;text-shadow:0 2px 22px rgba(0,0,0,.5)}

/* Cotton — warm, natural, letterpress fiber (verbatim from suede.php's product-suede.css) */
.keep-exploring .cotton-card{background:linear-gradient(145deg,#241f18,#c9a877 55%,#8a6a44)}
.keep-exploring .cotton-card .mat-mark{color:#efe7d7;text-shadow:-1px -1px 1px rgba(255,255,255,.9),2px 3px 5px rgba(120,102,72,.30)}

/* Linen — light, woven texture (verbatim from cotton.php's product-cotton.css, the mockup's own definition) */
.keep-exploring .linen-card{background:linear-gradient(145deg,#ece5d8,#d8cfbe);border:1px solid rgba(120,105,80,.14)}
.keep-exploring .linen-card .linen-weave{position:absolute;inset:0;opacity:.55;background:repeating-linear-gradient(0deg,rgba(150,133,105,.16) 0 1px,transparent 1px 5px),repeating-linear-gradient(90deg,rgba(150,133,105,.16) 0 1px,transparent 1px 5px)}
.keep-exploring .linen-card .mat-mark{color:#7d7059}