/* IKI V6.6 · A readable editorial object. All typography has a natural visible
   state; movement belongs to the paper plane, never individual words. */
.sample-page, #story-sample-dialog {
  --sample-ink: #172e37;
  --sample-muted: #4c605f;
  --sample-paper: #eeeadd;
  --sample-line: #9ba8a080;
  --sample-serif: "Cormorant Garamond", Georgia, serif;
  --sample-sans: "Manrope", Arial, sans-serif;
  font-family: var(--sample-sans);
  -webkit-font-smoothing: antialiased;
}
.sample-page { margin: 0; color: #dfe7e4; background: #08141d; }
.sample-page *, #story-sample-dialog * { box-sizing: border-box; }
.sample-page a { color: inherit; }
.sample-page-bar { display: flex; justify-content: space-between; gap: 20px; max-width: 1140px; margin: auto; padding: 28px 32px; font-size: 12px; }
.sample-page-bar a { text-underline-offset: 5px; }
.sample-page-bar span { color: #a9bbbe; }
.sample-page-main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.sample-page-footer { max-width: 1080px; padding: 28px 24px 50px; margin: auto; font-size: 12px; }
.sample-page-footer a { text-underline-offset: 6px; }
.sample-page-footer p { color: #acbebf; margin-top: 22px; font-size: 11px; }
.sample-folio { position: relative; display: grid; grid-template-columns: 35% 65%; margin: 0; box-shadow: 0 28px 80px #0005, 3px 3px 0 #a0a699, 5px 5px 0 #152c35; text-align: left; isolation: isolate; }
.sample-folio p, .sample-folio h1, .sample-folio h2, .sample-folio blockquote, .sample-folio dl, .sample-folio dd { margin: 0; }
.sample-cover { position: relative; overflow: hidden; background: #0b202b; color: #edf0e8; }
.sample-cover::after { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg,#071822f0 0%,#0d2734db 48%,#09192438 100%); pointer-events: none; }
.sample-cover-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 56% 80%; opacity: .85; }
.sample-cover-content { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 100%; padding: 36px 32px 30px; }
.sample-wordmark { display: flex; align-items: center; gap: 14px; font: 400 9px/1.6 var(--sample-sans); letter-spacing: .18em; }
.sample-wordmark img { display: block; width: 46px; height: 46px; }
.sample-cover-title { margin: 68px 0 42px; }
.sample-folio .sample-kicker { font: 500 10px/1.6 var(--sample-sans); letter-spacing: .14em; text-transform: uppercase; }
.sample-cover .sample-kicker { color: #bacdce; }
.sample-cover h1 { margin-top: 20px; font: 400 clamp(42px,4.3vw,62px)/.98 var(--sample-serif); letter-spacing: -.025em; color: #f0f0e7; }
.sample-folio em { font-weight: 400; }
.sample-cover h1 em { color: #bbd3d6; }
.sample-cover-rule { display: block; width: 48px; height: 1px; background: #c3d3cf99; margin-top: 32px; }
.sample-folio .sample-cover-colophon { margin-top: auto; padding-top: 28px; font: 400 12px/1.8 var(--sample-sans); color: #dde6e2; }
.sample-paper { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 31px 38px 24px; color: var(--sample-ink); background: radial-gradient(ellipse at 85% 12%,#faf7ed80,transparent 70%),var(--sample-paper); box-shadow: inset 12px 0 18px -17px #1a2d39; }
.sample-paper::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23787564' opacity='.3' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E"); }
.sample-paper > * { position: relative; }
.sample-edition { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #405b60; }
.sample-edition-number { font: 400 19px/1 var(--sample-serif); }
.sample-folio .sample-introduction { max-width: 390px; margin: 12px 0 23px; font: 400 12px/1.75 var(--sample-sans); color: var(--sample-muted); }
.sample-nav { display: grid; grid-template-columns: repeat(3,1fr); border-bottom: 1px solid var(--sample-line); gap: 12px; margin: 0 0 27px; }
.sample-folio button { font-family: var(--sample-sans); font-weight: 500; border-radius: 0; cursor: pointer; box-shadow: none; -webkit-tap-highlight-color: transparent; }
.sample-nav button { position: relative; border: 0; padding: 8px 0 13px; background: transparent; color: var(--sample-muted); text-align: left; font-size: 11px; line-height: 1.6; letter-spacing: 0; }
.sample-nav button span { display: block; margin-bottom: 6px; font-size: 9px; color: #546b6c; letter-spacing: .14em; }
.sample-nav button::after { content: ""; position: absolute; height: 2px; bottom: -1px; left: 0; right: 0; background: #234d5c; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease; }
.sample-nav button[aria-selected="true"] { color: #112f3d; }
.sample-nav button[aria-selected="true"]::after { transform: scaleX(1); }
.sample-chapters { flex: 1; min-width: 0; }
.sample-chapter { scroll-margin-top: 85px; }
.sample-chapter + .sample-chapter { margin-top: 32px; border-top: 1px solid var(--sample-line); padding-top: 30px; }
[data-sample-ready="true"] .sample-chapter + .sample-chapter { margin-top: 0; padding-top: 0; border: 0; }
.sample-folio .sample-chapter-label { color: #466269; font-size: 9px; margin-bottom: 10px; }
.sample-folio .sample-chapter h2 { font: 400 clamp(31px,3.05vw,44px)/1.07 var(--sample-serif); letter-spacing: -.02em; color: #163442; margin: 0 0 22px; }
.sample-chapter > p:not(.sample-kicker) { font: 400 14px/1.85 var(--sample-sans); color: #2f4549; margin: 0 0 16px; }
.sample-thought { border-top: 1px solid var(--sample-line); padding-top: 18px; margin-top: 26px; }
.sample-thought .sample-kicker { color: #4c6263; font-size: 9px; }
.sample-folio .sample-thought blockquote { font: italic 400 26px/1.2 var(--sample-serif); margin-top: 10px; color: #284c58; }
.sample-notes > div { display: grid; grid-template-columns: 110px 1fr; gap: 14px; border-top: 1px solid var(--sample-line); padding: 15px 0; }
.sample-notes dt { font: 500 12px/1.75 var(--sample-sans); }
.sample-notes dt span { display: inline-block; width: 27px; font-family: var(--sample-serif); color: #47636b; }
.sample-notes dd, .sample-serving dd { font: 400 13px/1.8 var(--sample-sans); color: #2f4549; }
.sample-chapter > p.sample-reading-note { border-top: 1px solid var(--sample-line); padding-top: 17px; font-size: 12px; margin-bottom: 0; }
.sample-serving > div { display: grid; grid-template-columns: 77px 1fr; gap: 13px; padding-bottom: 12px; }
.sample-serving dt { font: 500 11px/1.8 var(--sample-sans); text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.sample-temperature { border-top: 1px solid var(--sample-line); margin-top: 10px; padding-top: 18px; }
.sample-temperature .sample-kicker { font-size: 9px; }
.sample-temperature-controls { display: inline-flex; gap: 0; margin: 12px 0; border: 1px solid #8a9b99; }
.sample-temperature button { min-height: 42px; padding: 0 15px; border: 0; background: transparent; color: #294852; font-size: 11px; }
.sample-temperature button[aria-pressed="true"] { background: #173947; color: #f4f1e8; }
.sample-folio [data-sample-temperature-note] { font: 400 12px/1.8 var(--sample-sans); color: #334d53; min-height: 66px; }
.sample-pagination { display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--sample-line); margin-top: 27px; padding-top: 10px; }
.sample-pagination button { min-height: 44px; padding: 7px 0; background: none; border: 0; color: #193d4b; font-size: 11px; line-height: 1.6; text-align: left; }
.sample-pagination button:last-child { margin-left: auto; text-align: right; }
.sample-pagination button:disabled { opacity: .42; cursor: default; }
.sample-pagination [data-sample-position] { font: 400 10px/1.6 var(--sample-sans); color: #536966; margin-left: 7px; white-space: nowrap; }
.sample-disclaimer { padding-top: 14px; margin-top: 7px; border-top: 1px solid var(--sample-line); }
.sample-disclaimer p { font: 400 10px/1.75 var(--sample-sans); color: #50615d; }
.sample-disclaimer p:first-child { color: #2f4d51; margin-bottom: 4px; }
.sample-folio [hidden] { display: none !important; }
.sample-folio button:focus-visible, .sample-page a:focus-visible { outline: 2px solid #557c87; outline-offset: 4px; }
.sample-folio [data-sample-heading]:focus { outline: none; }
/* Modal framing is quiet and separate from the object; the close action stays
   reachable even on a narrow screen while the folio scrolls natively. */
#story-sample-dialog { padding: 0; border: 1px solid #8aabac55; width: min(1080px,calc(100vw - 56px)); max-width: none; max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; color: #e4eae6; background: #0a1922; box-shadow: 0 35px 120px #000b; scrollbar-width: thin; scrollbar-color: #69828c #0a1922; }
#story-sample-dialog::backdrop { background: #020910e8; }
.sample-dialog-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 10px 22px; min-height: 62px; background: #0a1922; border-bottom: 1px solid #81999744; }
#story-sample-dialog .sample-dialog-bar p { margin: 0; font: 400 12px/1.6 var(--sample-sans); letter-spacing: .04em; color: #e4eae6; }
.sample-dialog-bar button { display: flex; align-items: center; gap: 14px; min-width: 74px; min-height: 42px; padding: 0 0 0 8px; background: none; border: 0; color: #e4eae6; font: 400 11px/1 var(--sample-sans); cursor: pointer; }
.sample-dialog-bar button span { font: 300 27px/1 var(--sample-sans); }
.sample-dialog-bar button:focus-visible { outline: 2px solid #b5d0d4; outline-offset: 3px; }
[data-story-sample-mount] { min-height: 220px; }
[data-story-sample-mount][data-sample-state="loading"], [data-story-sample-mount][data-sample-state="error"] { min-height: min(720px,calc(100dvh - 112px)); }
.sample-loading, .sample-load-error { padding: 48px 30px; color: #dce7e5; font: 400 14px/1.9 var(--sample-sans); }
.sample-load-error button { display: inline-block; min-height: 44px; margin: 22px 22px 0 0; padding: 8px 18px; background: #dce7e5; color: #163441; border: 1px solid #dce7e5; font: 500 12px/1.6 var(--sample-sans); cursor: pointer; }
.sample-load-error button:focus-visible, .sample-load-error a:focus-visible { outline: 2px solid #c5e0e2; outline-offset: 4px; }
.sample-loading a, .sample-load-error a, [data-story-sample-mount] > p a { color: #dce7e5; text-underline-offset: 5px; }
#story-sample-dialog .sample-folio { box-shadow: none; }
body.is-story-sample-open { overflow: hidden; }
.story-card-media[data-story-sample-open] { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.story-card-media .sample-open-label { position: absolute; z-index: 4; bottom: 30px; left: 24px; right: 90px; width: fit-content; padding: 10px 14px; border: 1px solid #b3c4c055; background: #07151eed; color: #e1e8e4; font: 400 11px/1.65 var(--sans,"Manrope",sans-serif); letter-spacing: .02em; }
.story-card-media[data-story-sample-open]:is(:hover,:focus-visible) .sample-open-label { border-color: #c0d4d3aa; }
@media (min-width: 761px) { [data-sample-ready="true"] .sample-chapters { min-height: 386px; } }
@media (max-width: 1000px) and (min-width: 761px) {
  .sample-cover-content { padding: 30px 23px; }
  .sample-paper { padding: 28px; }
  .sample-cover h1 { font-size: 46px; }
  .sample-cover-title { margin-top: 60px; }
  .sample-notes > div { grid-template-columns: 90px 1fr; }
}
@media (max-width: 760px) {
  .sample-folio { grid-template-columns: 1fr; }
  .sample-cover-content { min-height: 260px; padding: 23px 26px 24px; }
  .sample-cover-photo { object-position: 50% 67%; }
  .sample-cover::after { background: linear-gradient(90deg,#081e2af5 0%,#0a2230dc 40%,#091d2755 100%); }
  .sample-wordmark { gap: 10px; font-size: 8px; }
  .sample-wordmark img { width: 32px; height: 32px; }
  .sample-cover-title { margin: 23px 0 0; }
  .sample-cover h1 { font-size: 42px; line-height: .97; margin-top: 10px; }
  .sample-cover .sample-kicker { font-size: 8px; }
  .sample-cover h1 br:nth-child(2) { display: none; }
  .sample-cover h1 em::before { content: " "; }
  .sample-cover-rule, .sample-cover-colophon { display: none; }
  .sample-paper { padding: 24px 26px 25px; box-shadow: none; }
  .sample-folio .sample-introduction { font-size: 12px; margin-bottom: 17px; }
  .sample-folio .sample-chapter h2 { font-size: 37px; margin-bottom: 20px; }
  .sample-chapter > p:not(.sample-kicker) { font-size: 16px; line-height: 1.8; }
  .sample-folio .sample-reading-note { font-size: 14px !important; }
  .sample-notes > div { grid-template-columns: 1fr; gap: 6px; padding: 17px 0; }
  .sample-notes dt { font-size: 12px; }
  .sample-notes dd, .sample-serving dd { font-size: 15px; line-height: 1.8; }
  .sample-serving > div { grid-template-columns: 1fr; gap: 5px; padding-bottom: 18px; }
  .sample-temperature button { min-height: 44px; font-size: 12px; }
  .sample-folio [data-sample-temperature-note] { font-size: 14px; min-height: 126px; }
  .sample-disclaimer p { font-size: 11px; }
  .sample-nav { gap: 9px; margin-bottom: 26px; }
  .sample-nav button { font-size: 11px; }
  .sample-thought { margin-top: 23px; }
  .sample-pagination { flex-wrap: wrap; gap: 9px; }
  #story-sample-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .sample-dialog-bar { padding: 9px 18px; min-height: 60px; }
  .sample-page-bar { padding: 22px 20px; }
  .sample-page-bar span { display: none; }
  .sample-page-main { padding: 0 14px; }
  .sample-page-footer { padding: 25px 20px 40px; }
  .story-card-media .sample-open-label { left: 14px; bottom: 22px; right: 72px; font-size: 10px; padding: 9px 10px; }
}
@media (max-width: 359px) {
  .sample-paper { padding-inline: 20px; }
  .sample-cover-content { padding-inline: 20px; }
  .sample-folio .sample-chapter h2 { font-size: 32px; }
  .sample-pagination button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .sample-folio *, #story-sample-dialog { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
html:is(.motion-off,.is-motion-still) .sample-folio * { animation: none !important; transition: none !important; }
@media print {
  .sample-page { background: white; }
  .sample-page-bar,.sample-page-footer,.sample-nav,.sample-pagination,.sample-temperature-controls,.sample-dialog-bar { display: none !important; }
  .sample-folio { display: block; box-shadow: none; }
  .sample-cover { background: #122c39 !important; print-color-adjust: exact; }
  .sample-cover-content { padding: 24px; }
  .sample-cover-title { margin: 24px 0; }
  .sample-cover h1 { font-size: 40px; }
  .sample-cover h1 br { display: none; }
  .sample-cover-colophon { display: none; }
  .sample-paper { background: white; color: #172e37; }
  .sample-folio [data-sample-panel][hidden] { display: block !important; margin-top: 30px; }
  .sample-chapter { break-inside: avoid; }
  #story-sample-dialog:not([open]) { display: none !important; }
  #story-sample-dialog[open] { position: static; width: 100%; max-height: none; overflow: visible; }
  body.is-story-sample-open > :not(#story-sample-dialog) { display: none !important; }
}