@layer reset, base, layout, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  button, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
  img, svg { display: block; }
  img { max-width: 100%; height: auto; }
  button { color: inherit; }
  [hidden] { display: none !important; }
}
@layer base {
  :root {
    --paper: #f8f5ef; --porcelain: #f2eee6; --ink: #17243a; --oxblood: #7b2834;
    --muted: #62625f; --rule: #c8c1b7; --deep-paper: #e8e3da; --midnight: #111b2c;
    --serif: 'Iowan Old Style', 'Palatino Linotype', Baskerville, Georgia, serif;
    --sans: 'Avenir Next', Avenir, 'Segoe UI', sans-serif;
    --ease: cubic-bezier(.16, 1, .3, 1);
    --painting-shadow: 0 15px 26px -13px rgb(23 36 58 / 48%);
  }
  html { scroll-behavior: smooth; scroll-padding-top: 2rem; scrollbar-color: var(--rule) var(--porcelain); }
  body { background: var(--porcelain); color: var(--ink); font: 1rem/1.7 var(--sans); }
  ::selection { background: var(--oxblood); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--oxblood); outline-offset: 5px; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; text-wrap: balance; }
  h1 { font-size: clamp(3.1rem, 5.15vw, 5.2rem); line-height: 1.06; letter-spacing: -.035em; }
  h2 { font-size: clamp(2.4rem, 3.7vw, 3.8rem); line-height: 1.1; letter-spacing: -.025em; }
  h3 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.015em; }
  em { color: var(--oxblood); font-weight: 400; }
  p { max-width: 70ch; }
  a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
  button, summary { cursor: pointer; }
  button { border: 0; background: transparent; }
  button:disabled { cursor: default; opacity: .5; }
  .small { font-size: .82rem; line-height: 1.65; }
  .muted { color: var(--muted); }
  .shell { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
  .section { padding-block: 104px; }
  .skip-link { position: fixed; top: 8px; left: 8px; padding: 12px 20px; z-index: 100; background: var(--paper); transform: translateY(-150%); }
  .skip-link:focus { transform: none; }
}
@layer layout {
  .site-header { min-height: 110px; display: flex; align-items: center; justify-content: space-between; gap: 28px; border-bottom: 1px solid var(--rule); }
  .wordmark { font: 2.45rem/1 var(--serif); letter-spacing: -.04em; text-decoration: none; }
  .site-header nav { display: flex; gap: 34px; align-items: center; font-size: .88rem; }
  .site-header nav a { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
  .site-header nav a:hover, .site-header nav a[aria-current] { color: var(--oxblood); text-decoration: underline; }
  .nav-contact { border-bottom: 1px solid var(--ink); }
  .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 42px; align-items: center; min-height: 700px; padding-block: 62px 64px; }
  .hero-copy h1 { max-width: 10.5em; }
  .hero-description { font-size: 1.14rem; line-height: 1.75; max-width: 32em; margin-top: 28px; }
  .hero-detail { font-size: .86rem; color: var(--muted); max-width: 33em; margin: 14px 0 30px; }
  .hero-art { position: relative; height: 590px; min-width: 0; }
  .hero-card { position: absolute; width: 44%; top: 57px; left: 0; }
  .hero-card-left { transform: rotate(-8deg); }
  .hero-card-right { width: 36%; left: 63%; top: 70px; transform: rotate(10deg); }
  .hero-card-center { width: 44%; left: 39%; top: 22px; z-index: 2; transform: rotate(-2deg); }
  .hero-card:focus-visible { z-index: 3; }
  .hero-art .painting-surface { box-shadow: 0 24px 34px -15px rgb(23 36 58 / 55%); }
  .art-caption { position: absolute; bottom: 2px; left: 0; right: 0; text-align: center; color: var(--muted); font: italic 1.05rem/1.7 var(--serif); }
  .art-caption span { display: block; font: .74rem/1.8 var(--sans); }
  .launch-note { border-block: 1px solid var(--rule); padding-block: 19px; display: flex; align-items: center; gap: 14px; font-size: .8rem; }
  .launch-note p { max-width: 95ch; }
  .launch-note strong { font-weight: 600; }
  .launch-note a { margin-left: auto; flex-shrink: 0; display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--oxblood); flex-shrink: 0; }
  .section-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 80px; align-items: end; margin-bottom: 44px; }
  .section-intro .small { margin-top: 14px; }
  .collection-tools { display: flex; gap: 24px; justify-content: space-between; align-items: center; margin-bottom: 32px; }
  .gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; row-gap: 45px; }
  .gallery-item { min-width: 0; }
  .gallery-item figcaption { padding-top: 19px; }
  .gallery-item h3 { font-size: 1.27rem; }
  .gallery-item p { margin-top: 5px; font-size: .77rem; color: var(--muted); }
  .keepsake-section { background: var(--deep-paper); }
  .keepsake-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 90px; }
  .section-subtitle { max-width: 28em; margin-block: 25px; }
  .product-story > div + div { padding-top: 28px; margin-top: 28px; border-top: 1px solid var(--rule); }
  .product-story h3 { font-size: 1.7rem; margin-bottom: 10px; }
  .product-story p { font-size: .93rem; }
  .reading-section { background: var(--midnight); color: var(--paper); }
  .reading-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 90px; align-items: center; }
  .reading-art { text-align: center; }
  .reading-painting { width: 255px; transform: rotate(-5deg); }
  .reading-art > p { color: #d1c8b8; font: italic 1.05rem/1.6 var(--serif); margin: 35px auto 0; }
  .reading-copy > p { margin-top: 24px; color: #d5d8dc; }
  .reading-copy dl { margin-top: 32px; }
  .reading-copy dl > div { display: grid; grid-template-columns: 125px 1fr; gap: 20px; border-top: 1px solid #48505e; padding-block: 18px; }
  .reading-copy dt { font: 1.27rem/1.4 var(--serif); }
  .reading-copy dd { color: #d5d8dc; font-size: .9rem; }
  .reading-copy .reading-disclosure { font-size: .78rem; color: #b7bec9; margin-top: 22px; }
  .reading-section :focus-visible { outline-color: var(--paper); }
  .faq { display: grid; grid-template-columns: 1fr 1.2fr; gap: 90px; }
  .faq > div > p { margin-top: 28px; }
  .contact-banner { display: flex; align-items: center; justify-content: space-between; gap: 70px; padding-block: 64px 72px; border-block: 1px solid var(--rule); }
  .contact-banner > div { max-width: 27em; }
  .contact-banner .button { margin-top: 25px; }
  .site-footer { padding-block: 56px 28px; }
  .footer-top, .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; }
  .footer-top p { margin-top: 17px; font-size: .83rem; color: var(--muted); }
  .footer-email { display: inline-flex; align-items: center; gap: 18px; font-size: .93rem; }
  .footer-bottom { align-items: flex-end; margin-top: 50px; font-size: .72rem; color: var(--muted); }
  .footer-bottom nav { display: flex; gap: 22px; }
  .footer-bottom nav a { display: inline-flex; align-items: center; min-height: 44px; }
  .footer-note { margin-top: 18px; max-width: none; font-size: .68rem; color: var(--muted); }
  .document { padding-block: 40px 100px; }
  .back-link { font-size: .82rem; }
  .document-heading { max-width: 850px; padding-block: 64px 40px; }
  .document h1 { font-size: clamp(3.5rem, 6vw, 5.5rem); }
  .lead { margin-top: 26px; font-size: 1.25rem; max-width: 39em; }
  .document-body { max-width: 720px; }
  .document-body h2 { font-size: 2rem; margin: 42px 0 17px; }
  .document-body p + p { margin-top: 18px; }
  .document-body .button { margin-top: 30px; }
  .document + * { border-top: 1px solid var(--rule); }
  .contact-email { display: inline-flex; align-items: center; gap: 22px; font: clamp(1.4rem, 3.1vw, 2.2rem)/1.5 var(--serif); margin-bottom: 14px; }
  .business-details > div { display: grid; grid-template-columns: 140px 1fr; gap: 24px; border-top: 1px solid var(--rule); padding-block: 12px; font-size: .92rem; }
  .business-details dt { color: var(--muted); }
  .business-details + p { margin-top: 22px; }
}
@layer components {
  .button { background: var(--oxblood); color: var(--paper); display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 52px; padding: 12px 23px; font-size: .88rem; font-weight: 600; text-decoration: none; transition: background .2s; }
  .button:hover { background: var(--ink); }
  .text-link { display: inline-flex; align-items: center; gap: 13px; padding-block: 8px; text-decoration: underline; color: var(--oxblood); font-size: .92rem; }
  .text-link svg, .button svg { flex-shrink: 0; }
  .filters { display: flex; gap: 24px; }
  .filters button { padding: 11px 0; border-bottom: 2px solid transparent; font-size: .84rem; }
  .filters button[aria-pressed='true'] { color: var(--oxblood); border-color: var(--oxblood); }
  .filters button:hover { color: var(--oxblood); }
  .painting-button { padding: 0; perspective: 1000px; text-align: inherit; touch-action: manipulation; }
  .painting-button:not(.hero-card) { position: relative; }
  .gallery .painting-button { display: block; width: 100%; }
  .painting-surface { display: block; border-radius: 3px; background: #c3b59b; box-shadow: var(--painting-shadow); transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px)); transition: transform .5s var(--ease), box-shadow .4s var(--ease); }
  .painting-surface img { width: 100%; border-radius: 3px; aspect-ratio: 897 / 1497; object-fit: contain; }
  .painting-button.tracking .painting-surface { transition: transform .12s ease-out, box-shadow .2s; }
  .view-label { position: absolute; inset: auto 10px 10px; background: var(--paper); color: var(--ink); display: flex; justify-content: center; align-items: center; gap: 8px; padding: 7px; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; font-size: .73rem; pointer-events: none; }
  .painting-button:hover .view-label, .painting-button:focus-visible .view-label { opacity: 1; transform: none; }
  .faq-list details { border-top: 1px solid var(--rule); }
  .faq-list details:last-child { border-bottom: 1px solid var(--rule); }
  .faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 23px; font-size: 1rem; list-style: none; }
  .faq-list summary::-webkit-details-marker { display: none; }
  .faq-list summary::after { content: ''; width: 10px; height: 10px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin-right: 5px; flex-shrink: 0; }
  .faq-list details[open] summary::after { transform: rotate(225deg); }
  .faq-list details p { font-size: .92rem; padding-bottom: 23px; max-width: 65ch; }
  .art-dialog { color: var(--ink); background: var(--paper); border: none; padding: 0; width: min(1040px, calc(100% - 48px)); max-height: calc(100dvh - 48px); overflow: auto; box-shadow: 0 24px 90px rgb(0 0 0 / 35%); }
  .art-dialog::backdrop { background: rgb(17 27 44 / 83%); }
  .art-dialog-top { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px 12px 30px; border-bottom: 1px solid var(--rule); font-size: .8rem; }
  .icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; }
  .icon-button:hover { background: var(--deep-paper); }
  .art-dialog-body { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 50px; padding: 30px 60px 40px; }
  .inspector-stage { position: relative; width: min(100%, calc(67dvh * 897 / 1497)); margin-inline: auto; aspect-ratio: 897 / 1497; background: var(--deep-paper); }
  #art-image { width: 100%; height: 100%; object-fit: contain; box-shadow: var(--painting-shadow); }
  .art-loading { position: absolute; bottom: 14px; left: 14px; right: 14px; padding: 7px 10px; color: var(--ink); background: var(--paper); text-align: center; font-size: .73rem; }
  .inspector-copy h2 { font-size: 2.7rem; margin: 10px 0 18px; }
  #art-edition { color: var(--muted); margin: -8px 0 18px; }
  .inspector-copy > p.small.muted { margin-top: 20px; }
  .inspector-nav { display: flex; align-items: center; gap: 20px; margin-top: 32px; font-variant-numeric: tabular-nums; }
  .previous-art svg { transform: rotate(180deg); }
  .inspector-copy .inspector-hint { font-size: .71rem; margin-top: 14px; }
  body:has(dialog[open]) { overflow: hidden; }
}
@layer responsive {
  @media (min-width: 1600px) { .hero { min-height: 770px; } }
  @media (max-width: 1150px) {
    .shell { width: calc(100% - 72px); }
    .hero { min-height: 620px; gap: 20px; }
    .hero-art { height: 485px; }
    .hero-card { top: 60px; }
    .hero-card-center { top: 35px; }
    .section-intro, .keepsake-grid, .reading-grid, .faq { gap: 50px; }
    .gallery { gap: 36px 25px; }
    .launch-note { align-items: flex-start; }
    .status-dot { margin-top: 8px; }
  }
  @media (max-width: 800px) {
    .shell { width: calc(100% - 48px); }
    .site-header { min-height: 89px; gap: 20px; }
    .wordmark { font-size: 2.1rem; }
    .site-header nav { gap: 20px; font-size: .8rem; }
    .site-header .nav-contact svg { display: none; }
    .hero { grid-template-columns: 1fr; gap: 0; padding-block: 48px 25px; }
    .hero-copy { max-width: 600px; }
    .hero h1 { font-size: clamp(3rem, 7vw, 4.6rem); }
    .hero-art { width: min(510px, 100%); height: 540px; margin: 30px auto 0; }
    .hero-card { top: 44px; }
    .hero-card-center { top: 16px; }
    .hero-description { margin-top: 22px; }
    .section { padding-block: 72px; }
    .section-intro { grid-template-columns: 1fr; gap: 25px; }
    .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 30px; }
    .keepsake-grid { grid-template-columns: 1fr; gap: 38px; }
    .product-story { max-width: 650px; }
    .reading-grid { grid-template-columns: .8fr 1.2fr; gap: 30px; }
    .reading-copy h2 { font-size: 2.5rem; }
    .reading-painting { width: 200px; max-width: 90%; }
    .reading-copy dl > div { grid-template-columns: 1fr; gap: 8px; }
    .faq { grid-template-columns: 1fr; gap: 34px; }
    .faq h2 br { display: none; }
    .contact-banner { gap: 30px; padding-block: 50px; }
    .contact-banner h2 { font-size: 2.7rem; }
    .contact-banner > div { max-width: 20em; }
    .footer-top, .footer-bottom { align-items: flex-start; }
    .footer-bottom { flex-direction: column; gap: 12px; }
    .art-dialog-body { padding: 24px; gap: 26px; }
    .inspector-copy h2 { font-size: 2.2rem; }
  }
  @media (max-width: 560px) {
    .shell { width: calc(100% - 40px); }
    .site-header { flex-wrap: wrap; row-gap: 12px; padding-block: 20px 12px; }
    .site-header .wordmark { font-size: 2.1rem; }
    .site-header nav { width: 100%; justify-content: space-between; gap: 8px; }
    .site-header nav a { min-height: 36px; }
    .site-header .nav-contact { border-bottom: 0; }
    .hero { padding-block: 35px 20px; }
    .hero h1 { font-size: clamp(2.5rem, 10vw, 3.6rem); }
    .hero-description { font-size: 1rem; line-height: 1.7; margin-top: 22px; }
    .hero-detail { margin-bottom: 23px; font-size: .8rem; }
    .button { min-height: 50px; padding-inline: 20px; }
    .hero-art { height: calc((100vw - 40px) * 1.17); margin-top: 27px; }
    .hero-card { top: 30px; }
    .hero-card-center { top: 5px; }
    .art-caption { font-size: .94rem; bottom: 3px; }
    .art-caption span { font-size: .7rem; }
    .launch-note { padding-block: 17px; gap: 10px; font-size: .73rem; }
    .launch-note a { display: none; }
    .section { padding-block: 58px; }
    h2 { font-size: 2.5rem; }
    .section-intro { margin-bottom: 25px; gap: 21px; }
    .section-intro > div > p { font-size: .95rem; }
    .section-intro .small { font-size: .77rem; }
    .collection-tools { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 25px; }
    .filters { gap: 20px; width: 100%; }
    .filters button { font-size: .72rem; min-height: 46px; white-space: normal; }
    .gallery { gap: 28px 20px; }
    .gallery-item h3 { font-size: 1.08rem; }
    .gallery-item figcaption { padding-top: 14px; }
    .gallery-item p { font-size: .72rem; }
    .view-label { display: none; }
    .reading-grid { grid-template-columns: 1fr; gap: 34px; }
    .reading-art { order: 1; }
    .reading-painting { width: 180px; }
    .reading-art > p { margin-top: 23px; }
    .reading-copy h2 { font-size: 2.5rem; }
    .reading-copy dl > div { grid-template-columns: 110px 1fr; gap: 15px; }
    .reading-copy > p { font-size: .94rem; }
    .reading-copy .reading-disclosure { font-size: .76rem; }
    .faq h2 br { display: initial; }
    .faq-list summary { font-size: .92rem; }
    .contact-banner { display: block; }
    .contact-banner > div { margin-top: 24px; max-width: none; }
    .footer-top { flex-direction: column; gap: 27px; }
    .footer-email { font-size: .87rem; }
    .footer-bottom { margin-top: 30px; }
    .document { padding-bottom: 60px; }
    .document-heading { padding-block: 39px 30px; }
    .document h1 { font-size: 3.2rem; }
    .document .lead { font-size: 1.1rem; }
    .document-body { font-size: .94rem; }
    .document-body h2 { font-size: 1.8rem; }
    .contact-email { gap: 12px; font-size: clamp(1.3rem, 5.9vw, 2rem); }
    .business-details > div { grid-template-columns: 100px 1fr; gap: 12px; }
    .art-dialog { width: 100%; max-width: none; max-height: 100dvh; height: 100dvh; margin: 0; }
    .art-dialog-top { padding: 10px 14px 10px 20px; font-size: .73rem; }
    .art-dialog-body { grid-template-columns: 1fr; gap: 22px; padding: 24px 24px 32px; }
    .inspector-stage { width: min(100%, calc(55dvh * 897 / 1497)); }
    .inspector-copy { max-width: 360px; width: 100%; margin-inline: auto; }
    .inspector-copy h2 { font-size: 2rem; margin: 4px 0 12px; }
    #art-edition { margin: 0 0 14px; }
    .inspector-copy > p.small.muted { margin-top: 12px; }
    .inspector-nav { margin-top: 16px; justify-content: space-between; }
    .inspector-hint { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .painting-surface { transform: none !important; }
  }
}