@layer foundation, capabilities, responsive, editions;

@layer foundation {
  :root { --paper: #f0edde; --ink: #1e4337; --accent: #b24b30; --rule: #1e433740; --cream: #eee9da; --blue: #293dc8; --mono: 'Courier New', monospace; }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: 28px; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: Georgia, 'Times New Roman', serif; -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-underline-offset: 5px; text-decoration-thickness: 1px; }
  a:hover { text-decoration: underline; }
  a:focus-visible, summary:focus-visible, .leaves:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
  ::selection { background: var(--ink); color: var(--paper); }
  .skip { position: fixed; left: 16px; top: -80px; z-index: 10; padding: 12px; background: var(--paper); }
  .skip:focus { top: 16px; }
  .sheet { max-width: 1500px; margin: auto; padding: 0 5%; }
  .masthead { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; border-bottom: 1px solid var(--rule); }
  .wordmark { display: flex; align-items: center; gap: 10px; font: 600 23px/1 Arial, sans-serif; letter-spacing: -1.2px; text-decoration: none; }
  .wordmark span { color: var(--accent); font: 38px/1 Georgia, serif; }
  .masthead-note, .index-link, .eyebrow, .read-link, .art-top, figcaption, .marginalia, .section-label, summary, footer, .folio, .leaf-index, .snap-label { font: 11px/1.5 var(--mono); }
  .masthead-note { letter-spacing: .04em; }
  .index-link { text-decoration: none; }
  .index-link span { margin-left: 24px; font-size: 20px; }
  .composition { display: grid; grid-template-columns: 1.05fr 1fr 20px; gap: 4%; align-items: center; padding: 64px 0; }
  .intro { min-width: 0; }
  .eyebrow { display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .05em; }
  .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
  h1 { font: 400 clamp(80px, 11.7vw, 170px)/.84 Georgia, serif; letter-spacing: -.075em; margin: 42px 0 30px; }
  h1 em { font-weight: inherit; color: var(--accent); }
  .dek { max-width: 360px; font-size: 18px; line-height: 1.6; }
  .read-link { display: inline-flex; align-items: center; gap: 40px; margin-top: 20px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); text-decoration: none; }
  .read-link span { font-size: 24px; line-height: 1; }
  .artwork { margin: 0; min-width: 0; background: var(--ink); color: var(--cream); padding: 24px; }
  .art-top, figcaption { display: flex; justify-content: space-between; gap: 10px; font-size: 10px; }
  .art-stage { position: relative; isolation: isolate; height: clamp(290px, 31vw, 440px); }
  .film { position: absolute; inset: 8% 0; z-index: -2; opacity: .7; background-image: radial-gradient(ellipse at 50% 50%, #c09442 0, #284f3f 60%, #1e4337 100%); }
  .letter-tile { position: absolute; inset: 12% 8%; background: var(--cream); opacity: .12; border-radius: 50%; }
  .letter { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 clamp(300px, 34vw, 470px)/.7 Georgia, serif; letter-spacing: -.1em; padding-right: .13em; padding-bottom: .12em; z-index: 2; }
  .orbit { position: absolute; width: 90%; height: 60%; left: 5%; top: 20%; border: 1px solid currentColor; border-radius: 50%; opacity: .45; transform: rotate(-35deg); z-index: 3; pointer-events: none; }
  .orbit-two { transform: rotate(50deg); }
  .asterisk { position: absolute; right: 0; top: 9%; width: 64px; height: 64px; display: grid; place-items: center; font: 74px/.8 Georgia, serif; color: #e6d377; z-index: 4; }
  .seal { position: absolute; bottom: 4%; left: -8%; display: grid; place-content: center; width: 100px; height: 100px; border: 1px solid var(--cream); border-radius: 50%; background: var(--accent); color: var(--cream); font: italic 16px/1.1 Georgia, serif; text-align: center; rotate: -12deg; z-index: 4; }
  .impressions { position: absolute; inset: 0; z-index: -1; }
  figcaption { border-top: 1px solid #eee9da66; padding-top: 16px; }
  .marginalia { display: flex; align-items: center; gap: 50px; writing-mode: vertical-rl; text-transform: uppercase; letter-spacing: .14em; font-size: 9px; }
  .marginalia span { font-size: 28px; writing-mode: horizontal-tb; }
  .alphabet { display: flex; justify-content: space-between; gap: 10px; padding: 25px 0 32px; border-block: 1px solid var(--rule); }
  .alphabet span { font: italic clamp(24px, 4vw, 56px)/1.3 Georgia, serif; }
  .alphabet span:nth-child(even) { color: var(--accent); }
  .reading, .workshop { padding: 26px 0 60px; border-bottom: 1px solid var(--rule); }
  .section-label { display: flex; justify-content: space-between; align-items: center; gap: 20px; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; }
  .section-label span:last-child { text-align: right; }
  .reading .section-label span:last-child { font: 26px/1 Georgia, serif; color: var(--accent); }
  .reading-content { display: grid; grid-template-columns: .9fr 1.6fr .7fr; gap: 4%; padding-top: 40px; align-items: start; }
  h2 { font: 400 clamp(29px, 3vw, 44px)/1.08 Georgia, serif; letter-spacing: -.045em; margin: 0; }
  h2 em { font-weight: 400; }
  .prose { columns: 2 180px; column-gap: 26px; font-size: 15px; line-height: 1.7; }
  .prose p { margin: 0 0 18px; }
  .prose p:last-child { margin-bottom: 0; }
  blockquote { margin: 0; padding-left: 20px; border-left: 1px solid var(--rule); font-size: 27px; font-style: italic; line-height: 1.3; }
  cite { display: block; font: 10px/1.5 var(--mono); margin-top: 20px; }
  .gallery { padding: 26px 0 52px; border-bottom: 1px solid var(--rule); position: relative; }
  .gallery-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 36px 0; }
  .gallery-heading p { margin: 0; font-size: 15px; font-style: italic; }
  .leaves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 14px 8px 24px; align-items: start; }
  .slip-wrap { min-width: 0; scroll-margin-top: 30px; }
  .slip { min-width: 0; position: relative; padding: 25px; border: 1px solid var(--rule); background-color: #e7e4d3; color: var(--ink); }
  .slip-quote, .slip-measure { background-color: #e7d6bb; }
  .slip-stamp { background-color: #d4dccb; }
  .folio { display: block; text-transform: uppercase; letter-spacing: .06em; font-size: 9px; }
  .slip h3 { font: 400 30px/1.12 Georgia, serif; letter-spacing: -.035em; margin: 20px 0 16px; }
  .slip p { font-size: 15px; line-height: 1.6; margin: 0; }
  .mirror-text { height: 196px; display: grid; place-content: center; padding-bottom: 42px; font: italic 138px/1 Georgia, serif; }
  .confetti { display: flex; justify-content: space-between; padding: 25px 0; font: 48px/1 Georgia, serif; color: var(--accent); }
  .slip-quote h3 { font-size: clamp(34px, 4vw, 58px); font-style: italic; }
  .frame { height: 190px; margin: 24px 0; padding: 20px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; gap: 8px; }
  .frame > span { font: 88px/1 Georgia, serif; letter-spacing: -.1em; }
  .frame > i { font: 40px/1 Georgia, serif; color: var(--accent); align-self: start; }
  .stamp { display: grid; place-content: center; height: 250px; margin: 22px 0; background: #1e4337; color: var(--cream); font: italic 230px/.9 Georgia, serif; position: relative; }
  .stamp > span { position: absolute; right: 12px; top: 12px; font: 50px/1 Georgia, serif; color: #e6d377; }
  .word-sample { width: max-content; max-width: 100%; margin: 28px 0; padding: 18px 10px; border-block: 1px dashed var(--ink); background: #f0e597; font-size: 30px; font-style: italic; }
  .chips { display: flex; width: max-content; max-width: 100%; border-block: 1px solid var(--rule); margin-top: 30px; padding-block: 12px; }
  .chips span { margin-inline: 12px; font: 20px/1.2 Georgia, serif; }
  .paper-cut { height: 170px; width: 100%; background: var(--accent); border-radius: 50%; margin: 24px 0; }
  .snap-label { display: block; min-height: 14px; margin-top: 18px; font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
  .leaf-index { display: flex; justify-content: center; gap: 24px; margin-top: 18px; }
  .leaf-index a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
  .workshop-grid { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 6%; padding-top: 40px; align-items: start; }
  .workshop-note { font-size: 15px; line-height: 1.6; }
  .paper-tools { display: grid; gap: 12px; }
  .paper-tools label { font: 10px/1.5 var(--mono); text-transform: uppercase; letter-spacing: .08em; }
  select, textarea { font: 18px/1.5 Georgia, serif; color: var(--ink); border: 1px solid var(--rule); background: #f7f2e6; border-radius: 0; max-width: 100%; }
  select { padding: 12px; width: 100%; margin-bottom: 12px; }
  textarea { padding: 16px; width: 100%; min-height: 88px; max-height: 300px; resize: vertical; }
  .fold { border-block: 1px solid var(--rule); padding-inline: 18px; background: #e7d6bb; }
  summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 24px 0; }
  summary::-webkit-details-marker { display: none; }
  .plus { font: 24px/1 Arial, sans-serif; }
  details[open] > summary .plus { transform: rotate(45deg); }
  .fold-body { padding-bottom: 24px; font-size: 17px; line-height: 1.6; }
  .fold-body p { margin: 0 0 18px; }
  .fold-body > span { font-size: 42px; color: var(--accent); }
  .colophon { border-bottom: 1px solid var(--rule); }
  .summary-hint { display: flex; align-items: center; gap: 32px; }
  .colophon-body { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8%; padding: 24px 0 48px; }
  .colophon-intro { align-self: start; }
  .colophon-intro p { max-width: 380px; font-size: 15px; line-height: 1.6; }
  .support-list { list-style: none; margin: 0; padding: 0; counter-reset: probe; }
  .support-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; border-bottom: 1px solid var(--rule); padding: 14px 0; font: 11px/1.5 var(--mono); counter-increment: probe; }
  .support-row::before { content: counter(probe, decimal-leading-zero); opacity: .6; }
  .support-row a { overflow-wrap: anywhere; }
  .support-row p { grid-column: 2 / -1; margin: 0; opacity: .75; }
  .support-state { font-size: 9px; padding-top: 2px; white-space: nowrap; }
  .support-row[data-supported='false'] .support-state { opacity: .6; }
  footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px 0; font-size: 10px; }
  footer a { text-decoration: none; }
}

@layer capabilities {
  @supports (corner-shape: bevel) {
    .artwork { border-radius: 0 68px 0 68px; corner-shape: bevel; background: var(--blue); }
    .art-top { padding-right: 44px; }
    figcaption { padding-left: 42px; }
    .letter-tile { border-radius: 65px; corner-shape: scoop bevel; opacity: 1; background: #e8ef91; rotate: -9deg; }
    .letter { color: var(--blue); }
  }
  @supports (border-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
    .seal { border-shape: polygon(50% 0%, 61% 17%, 79% 8%, 80% 28%, 100% 34%, 88% 50%, 100% 66%, 80% 72%, 79% 92%, 61% 83%, 50% 100%, 39% 83%, 21% 92%, 20% 72%, 0% 66%, 12% 50%, 0% 34%, 20% 28%, 21% 8%, 39% 17%); }
  }
  @supports (clip-path: shape(from 0% 0%, line to 100% 0%, line to 100% 100%, close)) {
    .paper-cut { border-radius: 0; clip-path: shape(from 0% 20%, curve to 50% 20% with 20% -30% / 30% 70%, curve to 100% 20% with 70% -30% / 80% 70%, line to 100% 80%, curve to 50% 80% with 80% 130% / 70% 30%, curve to 0% 80% with 30% 130% / 20% 30%, close); }
  }
  @supports (background-image: -moz-element(#ornament)) {
    .impressions { background-image: -moz-element(#ornament); background-size: 48px 48px; opacity: .33; }
    .stamp { background-image: -moz-element(#ornament); background-size: 44px 44px; }
  }
  .opening::first-letter { -webkit-initial-letter: 3; initial-letter: 3; margin-right: 8px; color: var(--accent); }
  blockquote, .slip-quote h3 { hanging-punctuation: first last; }
  .dek, .prose, .slip p { text-wrap: pretty; }
  h1, .reading h2 { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
  @supports (rotate: attr(data-tilt type(<angle>), 0deg)) { .slip { rotate: attr(data-tilt type(<angle>), 0deg); } }
  @supports (opacity: calc(sibling-index() / 8)) { .alphabet span { transform: translateY(calc(sin(sibling-index() * 55deg) * 10px)); font-size: calc(26px + sibling-index() * 3px); } }
  .confetti span { rotate: random(-24deg, 24deg); translate: 0 random(-12px, 12px); }
  @supports (display: grid-lanes) {
    .leaves { display: grid-lanes; grid-template-columns: 1fr .82fr 1.05fr; gap: 32px; }
  }
  @supports (background-clip: border-area) { .frame { border: 12px dotted transparent; background-image: repeating-linear-gradient(45deg, var(--accent) 0 10px, #c6a54a 10px 20px, var(--ink) 20px 30px); background-clip: border-area; } }
  .film { background-image: filter(radial-gradient(ellipse at 50% 50%, #c09442 0, #284f3f 60%, #1e4337 100%), hue-rotate(145deg)); }
  .mirror-text { -webkit-box-reflect: below -68px linear-gradient(transparent 60%, #0005); }
  .prose p { text-align: justify; text-justify: inter-character; }
  .chips { margin-trim: inline; }
  @supports selector(::scroll-marker) {
    .leaves { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(280px, 42%); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 18px; scroll-marker-group: after; anchor-name: --leaves; gap: 28px; padding: 18px 18px 32px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; overscroll-behavior-x: contain; }
    .slip-wrap { scroll-snap-align: start; }
    .slip-wrap::scroll-marker { content: ''; width: 8px; height: 8px; border: 1px solid var(--ink); border-radius: 50%; background: transparent; }
    .slip-wrap::scroll-marker:target-current { background: var(--ink); }
    .slip-wrap::scroll-marker:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
    .leaves::scroll-marker-group { display: flex; justify-content: center; gap: 16px; padding: 22px 100px; }
    .leaf-index { display: none; }
  }
  @supports selector(::scroll-button(right)) {
    .leaves::scroll-button(*) { position: absolute; position-anchor: --leaves; top: calc(anchor(bottom) + 8px); width: 40px; height: 40px; border: 1px solid var(--rule); color: var(--ink); background: var(--paper); font: 20px/1 Georgia, serif; cursor: pointer; }
    .leaves::scroll-button(left) { content: '←' / 'Previous leaves'; right: calc(anchor(right) + 48px); }
    .leaves::scroll-button(right) { content: '→' / 'Next leaves'; right: anchor(right); }
    .leaves::scroll-button(*):disabled { opacity: .3; cursor: default; }
    .leaves::scroll-button(*):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  }
  .slip-wrap { container-type: scroll-state; }
  @container scroll-state(snapped: inline) { .snap-label::after { content: 'In view — a closer look'; } }
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      .reading-progress { position: fixed; z-index: 8; inset: 0 0 auto; height: 3px; background: var(--accent); transform-origin: left; animation: progress linear both; animation-timeline: scroll(); }
      .orbit-one { animation: orbit linear both; animation-timeline: scroll(); }
      @keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @keyframes orbit { from { rotate: 0deg; } to { rotate: 110deg; } }
    }
  }
  @supports (interpolate-size: allow-keywords) { .fold { interpolate-size: allow-keywords; } }
  .word-sample { width: calc-size(max-content, size + 80px); }
  @supports (appearance: base-select) {
    select, select::picker(select) { appearance: base-select; }
    select { border-width: 0 0 1px; background: transparent; padding: 8px 0 16px; font-size: 40px; }
    select::picker(select) { border: 1px solid var(--ink); background: #f7f2e6; padding: 8px; }
    select option { padding: 10px 18px; font-size: 28px; }
    select option:checked { background: #e7d6bb; }
    select::picker-icon { font-size: 20px; color: var(--accent); }
  }
  textarea { field-sizing: content; }
  .fold::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .45s ease, opacity .45s ease, content-visibility .45s allow-discrete; }
  .fold[open]::details-content { block-size: auto; opacity: 1; }
  @supports (color: if(style(--tone: dark): white; else: black)) {
    .slip { --tone: light; background-color: if(style(--tone: dark): #1e4337; else: #e7d6bb); color: if(style(--tone: dark): #eee9da; else: #1e4337); }
    .slip[data-tone='dark'] { --tone: dark; }
  }
  @supports (column-wrap: wrap) { .prose { column-height: 200px; column-wrap: wrap; gap: 28px; } }
}

@layer responsive {
  @media (min-width: 1500px) { .sheet { padding-inline: 75px; } }
  @media (max-width: 1000px) {
    .composition { grid-template-columns: 1fr 1fr; gap: 6%; }
    .marginalia { display: none; }
    .reading-content { grid-template-columns: 1fr 1.7fr; gap: 36px; }
    blockquote { grid-column: 2; }
    .prose { columns: 1; }
    .leaves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
    .workshop-grid { grid-template-columns: 1fr 1.2fr; }
    .fold { grid-column: 2; }
    .eyebrow { font-size: 9px; }
    .art-top { font-size: 8px; }
    .seal { width: 80px; height: 80px; font-size: 14px; }
    @supports (display: grid-lanes) { .leaves { grid-template-columns: 1fr 1fr; } }
    @supports selector(::scroll-marker) { .leaves { grid-template-columns: none; grid-auto-columns: 58%; } }
  }
  @media (max-width: 650px) {
    .sheet { padding-inline: 6%; }
    .masthead { min-height: 80px; }
    .masthead-note { display: none; }
    .wordmark { font-size: 21px; }
    .composition { display: grid; grid-template-columns: 1fr; gap: 40px; padding: 36px 0; }
    .intro { display: block; }
    .composition .artwork { grid-column: 1; }
    .composition h1 { font-size: clamp(100px, 25vw, 155px); margin-block: 36px 24px; }
    h1 { font-size: clamp(100px, 25vw, 155px); margin-block: 36px 24px; }
    .dek { max-width: 100%; font-size: 17px; }
    .read-link { margin-top: 12px; }
    .artwork { margin-left: 12px; padding: 24px; }
    .art-stage { height: 330px; }
    .letter { font-size: 350px; }
    .seal { left: -11%; }
    .art-top { font-size: 9px; flex-direction: column; gap: 4px; }
    figcaption { font-size: 8px; flex-direction: column; align-items: end; gap: 4px; }
    .alphabet { gap: 8px; overflow: clip; padding-block: 28px; }
    .alphabet span { font-size: 23px; }
    .alphabet span:nth-child(n+7) { display: none; }
    .reading, .workshop { padding-bottom: 36px; }
    .reading-content, .workshop-grid, .colophon-body { display: grid; grid-template-columns: 1fr; gap: 28px; padding-top: 28px; }
    h2 { font-size: 36px; }
    .prose { columns: 1; font-size: 16px; }
    blockquote, .fold { grid-column: auto; }
    blockquote { margin-top: 8px; }
    .gallery-heading { align-items: start; flex-direction: column; }
    .gallery { padding-bottom: 40px; }
    .leaves { grid-template-columns: 1fr; gap: 30px; padding: 12px 8px 24px; }
    .slip { padding: 24px; }
    .slip-quote h3 { font-size: 48px; }
    .confetti { font-size: 54px; }
    .leaf-index { gap: 26px; }
    .workshop-grid { gap: 32px; }
    .workshop-note { margin-bottom: 0; }
    summary { font-size: 10px; }
    .summary-hint { gap: 16px; }
    .support-row { grid-template-columns: 22px 1fr auto; font-size: 10px; }
    footer { font-size: 9px; }
    footer > span:nth-child(2) { display: none; }
    @supports (opacity: calc(sibling-index() / 8)) { .alphabet span { font-size: calc(20px + sibling-index() * 2px); } }
    @supports selector(::scroll-marker) { .leaves { grid-template-columns: none; grid-auto-columns: 90%; padding: 16px 12px 28px; gap: 24px; } }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .fold::details-content { transition: none; }
  }
  @media print {
    .sheet { max-width: none; padding: 0; }
    .skip, .read-link, .colophon, .reading-progress, .leaf-index, footer a { display: none; }
    .composition { padding-block: 28px; }
    .leaves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
    .leaves::scroll-button(*), .slip-wrap::scroll-marker { content: none; }
    .leaves::scroll-marker-group { display: none; }
    .slip-wrap { break-inside: avoid; }
    .artwork, .slip { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    .fold::details-content { block-size: auto; }
  }
}