/* Mobile-first refinements to the previously published site structure.
   Scoped as a separate stylesheet so the live desktop styling remains recoverable.
   This is a review candidate, not a claim of a pixel-exact site restore. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { min-width: 0; }
img, svg, video { max-width: 100%; }
button, input, textarea { touch-action: manipulation; }
#main { min-width: 0; }
.hero-copy, .letter-text, .artifact-copy, .sample-intro, .preview-area,
.editions-head, .faq-grid, .hero-stage { min-width: 0; }
.hero h1, h2, h3 { overflow-wrap: normal; }
.hero-paper { transform-origin: center center; }
@media (max-width: 820px) {
  .nav.open { max-height: min(80vh, 550px); overflow-y: auto; }
  .nav.open a { display: flex; align-items: center; min-height: 48px; }
  .menu-toggle { min-width: 48px; min-height: 48px; }
  .hero { min-height: 0; }
  .hero-stage { width: 100%; }
  .hero-copy { padding-bottom: 44px; }
  .artifact-mat { height: clamp(320px, 75vw, 510px); }
  .sample-grid, .artifact-grid, .faq-grid { min-width: 0; }
  .steps article { min-width: 0; }
}
@media (max-width: 600px) {
  .topline { font-size: 9px; line-height: 1.5; padding: 9px 28px; }
  .topline-star { display: none; }
  .wrap { width: calc(100% - 36px); }
  .hero-copy { padding-top: 44px; padding-bottom: 32px; }
  .hero h1 {
    font-size: clamp(3.45rem, 13.8vw, 5.65rem);
    line-height: 1.02;
    letter-spacing: -.035em;
    margin: 20px 0 22px;
  }
  .hero-deck { font-size: 17px; line-height: 1.55; max-width: 38ch; }
  .hero-actions { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 14px; }
  .hero-actions .button { justify-content: space-between; width: 100%; }
  .hero-actions .text-link { justify-self: start; min-height: 44px; display: inline-flex; align-items: center; }
  .hero-footnote { margin-top: 22px; line-height: 1.55; }
  .hero-stage { margin: 0 0 24px; min-height: clamp(390px, 112vw, 515px); }
  .hero-paper { transform: rotate(-3deg) scale(.73); }
  .envelope { left: 50%; top: 39%; transform: translateX(-50%) rotate(9deg) scale(.75); }
  .stamp { right: 1%; bottom: 7%; transform: scale(.62) rotate(13deg); }
  .section { padding: 64px 0; }
  .letter-text h2, .artifact-copy h2, .sample-intro h2, .faq-grid h2, .process-section h2 {
    font-size: clamp(3.05rem, 11.6vw, 4.5rem);
    line-height: 1.05;
  }
  .letter-text > p { font-size: 18px; }
  .artifact-mat { height: 330px; }
  .mini-envelope { transform: rotate(-8deg) scale(.72); }
  .artifact-copy { padding-top: 20px; }
  .artifact-copy > p { font-size: 17px; }
  .feature-list > div { gap: 20px; }
  .steps { grid-template-columns: 1fr; gap: 24px; }
  .steps h3 { margin-top: 16px; font-size: 30px; }
  .process-disclosure { margin-top: 34px; }
  .sample-grid { gap: 28px; }
  .field input, .field textarea {
    min-height: 48px;
    font-size: 16px; /* Prevent iOS Safari input zoom */
    line-height: 1.4;
  }
  .field textarea { min-height: 90px; }
  .button, .form-button, .nav-cta { min-height: 48px; }
  .preview-letter { min-height: 0; padding: 14px; }
  .preview-letter-inner { min-height: 520px; padding: 25px 12px; }
  .preview-letter h3 { font-size: clamp(2rem, 7.6vw, 2.7rem); }
  .preview-message { font-size: 15px; line-height: 1.57; }
  .preview-controls { flex-wrap: wrap; gap: 14px; }
  .quiet-action { min-height: 44px; padding: 7px; }
  .faqs summary { min-height: 60px; align-items: center; }
  .footer-bottom { overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  .wrap { width: calc(100% - 32px); }
  .hero h1 { font-size: clamp(3.16rem, 14.1vw, 3.55rem); }
  .hero-stage { min-height: 385px; }
  .hero-paper { transform: rotate(-3deg) scale(.62); }
  .stamp { transform: scale(.53) rotate(13deg); right: 0; }
  .hero-footnote, .stage-caption { font-size: 11px; }
  .artifact-mat { height: 285px; }
  .mini-envelope { transform: rotate(-8deg) scale(.58); }
  .preview-letter { padding: 9px; }
  .preview-letter-inner { padding: 20px 9px; }
  .preview-letter h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.open { scroll-behavior: auto; }
}


/* Screenshot-matched original site treatment */
:root { --original-navy:#263c50; --original-cream:#f9f7f2; }
body { background:var(--original-cream); color:var(--original-navy); }
.topline { background:#e1e8d9; color:#263c50; font:600 12px/1.4 var(--font-sans); letter-spacing:.13em; padding:15px 14px; }
.topline-star { display:none; }
.site-header { background:#f9f7f2; border-bottom:0; }
.header-inner { min-height:138px; }
.brand { font:400 24px/1.22 Georgia,serif; letter-spacing:.16em; color:var(--original-navy); align-items:flex-start; }
.brand em { font:400 36px/1.13 Georgia,serif; letter-spacing:.2em; display:block; margin-top:9px; }
.nav { gap:39px; }
.nav a { font-size:15px; color:var(--original-navy); }
.nav-cta { border:0; border-bottom:1px solid var(--original-navy); border-radius:0; padding:12px 0!important; }
.hero { display:block; min-height:0; background: #d0e1ec url('../assets/oracle-sky.svg') center bottom / cover no-repeat; position:relative; }
.hero-inner { display:grid; grid-template-columns:53% 47%; min-height:750px; align-items:center; }
.hero-copy { padding:105px 20px 85px 0; z-index:2; }
.hero .eyebrow { color:var(--original-navy); font:600 13px/1.4 var(--font-sans); letter-spacing:.18em; }
.hero h1 { font:400 clamp(4.35rem,7.1vw,8rem)/.99 'Italiana',Georgia,serif; color:var(--original-navy); margin:38px 0 40px; letter-spacing:-.045em; }
.hero h1 .hero-italic { display:block; font:italic 600 clamp(2.1rem,4.05vw,4.9rem)/1.13 Georgia,serif; letter-spacing:-.045em; margin-top:28px; white-space:nowrap; }
.hero-deck { color:var(--original-navy); font:400 clamp(17px,1.85vw,24px)/1.58 var(--font-sans); max-width:540px; margin-bottom:37px; }
.hero .button-dark { background:var(--original-navy); color:#fff; min-height:66px; font-size:17px; padding:0 28px; }
.hero-footnote { font:400 14px/1.5 var(--font-sans); margin-top:29px; color:var(--original-navy); }
.hero-stage { position:relative; background:none; overflow:visible; min-height:640px; margin:0; display:flex; align-items:center; justify-content:center; }
.hero-paper { position:relative; transform:rotate(-2.6deg); width:min(350px,73%); height:485px; padding:0; background:#f8efd9; border:0; box-shadow:0 15px 20px #1c2c3730; z-index:3; display:flex; flex-direction:column; }
.paper-art { position:relative; width:100%; height:70%; background:#294863 url('../assets/oracle-letter-art.svg') center / cover no-repeat; flex-shrink:0; }
.paper-art-brand { position:absolute; top:23px; left:0; right:0; color:#fff6db; text-align:center; font:600 10px/1.5 var(--font-sans); letter-spacing:.24em; }
.paper-body { width:100%; flex:1; display:flex; align-items:center; flex-direction:column; padding:7px 12px 20px; }
.paper-body .paper-eyebrow { font:500 10px/1.4 var(--font-sans); color:var(--original-navy); letter-spacing:.15em; margin:1px 0 3px; }
.paper-body .paper-names { font:35px/1.1 'Italiana',Georgia,serif; color:var(--original-navy); white-space:nowrap; }
.paper-body .paper-names em { font:italic 28px Georgia,serif; color:var(--original-navy); }
.paper-body .paper-location { font:9px/1.2 var(--font-sans); letter-spacing:.05em; margin:4px 0; color:var(--original-navy); }
.paper-body .paper-message { font:italic 18px/1.22 Georgia,serif; color:var(--original-navy); margin:6px 0 0; }
.hero-stage .envelope { width:400px; height:470px; left:50%; top:55%; transform:translate(-42%,-45%) rotate(6deg); background:#e8e4d8; border:1px solid #d3ccbd; box-shadow:0 9px 15px #0001; z-index:1; }
.hero-stage .envelope:after { background:linear-gradient(150deg,transparent 49.8%,#ccc9be 50%,transparent 50.2%),linear-gradient(30deg,transparent 49.8%,#ccc9be 50%,transparent 50.2%); opacity:.6; }
.hero-stage .envelope-flap { background:#e8e4d8; }
.hero-stage .stage-caption { position:absolute; z-index:4; left:5%; right:5%; bottom:-3px; font:600 11px/1.65 var(--font-sans); letter-spacing:.11em; color:var(--original-navy); text-align:center; }
@media(max-width:980px) {
 .header-inner { min-height:100px; }
 .nav { gap:18px; }
 .hero-inner { grid-template-columns:1fr 1fr; min-height:680px; }
 .hero h1 { font-size:clamp(4rem,7vw,5.5rem); }
 .hero h1 .hero-italic { font-size:clamp(1.9rem,3.65vw,2.9rem); }
 .hero-stage { min-height:575px; }
 .hero-paper { width:300px; height:420px; }
 .hero-stage .envelope { transform:translate(-42%,-45%) rotate(6deg) scale(.83); }
 .paper-body .paper-names { font-size:31px; }
 .paper-body .paper-message { font-size:15px; }
}
@media(max-width:820px) {
 .header-inner { min-height:85px; }
 .brand { font-size:17px; }
 .brand em { font-size:25px; margin-top:4px; }
 .menu-toggle { display:block; }
 .hero-inner { display:grid; grid-template-columns:1fr; min-height:0; }
 .hero-copy { padding:70px 0 12px; }
 .hero h1 { font-size:clamp(4.5rem,10vw,6rem); margin:26px 0 29px; }
 .hero h1 .hero-italic { font-size:clamp(2rem,5.8vw,3rem); white-space:normal; }
 .hero-deck { font-size:19px; max-width:620px; }
 .hero-stage { min-height:620px; margin-bottom:0; }
 .hero-stage .stage-caption { bottom:24px; }
}
@media(max-width:600px) {
 .topline { font-size:9px; letter-spacing:.045em; padding:10px 12px; }
 .header-inner { min-height:73px; }
 .brand { font-size:15px; }
 .brand em { font-size:23px; letter-spacing:.18em; }
 .hero-copy { padding:46px 0 3px; }
 .hero .eyebrow { font-size:10px; letter-spacing:.12em; }
 .hero h1 { font-size:clamp(3.7rem,14vw,5.4rem); line-height:.98; margin:25px 0 24px; }
 .hero h1 .hero-italic { font-size:clamp(1.7rem,6.6vw,2.6rem); line-height:1.2; margin-top:22px; }
 .hero-deck { font-size:16px; line-height:1.6; max-width:44ch; margin-bottom:26px; }
 .hero .button-dark { min-height:58px; font-size:15px; padding:0 19px; }
 .hero-footnote { font-size:12px; margin-top:18px; }
 .hero-stage { min-height:525px; }
 .hero-paper { transform:rotate(-2.6deg) scale(.86); }
 .hero-stage .envelope { transform:translate(-42%,-45%) rotate(6deg) scale(.79); }
 .hero-stage .stage-caption { bottom:12px; font-size:9px; }
}
@media(max-width:380px) {
 .hero h1 { font-size:clamp(3.25rem,14.1vw,3.7rem); }
 .hero h1 .hero-italic { font-size:clamp(1.52rem,6.5vw,2rem); }
 .hero-stage { min-height:460px; }
 .hero-paper { transform:rotate(-2.6deg) scale(.72); }
 .hero-stage .envelope { transform:translate(-42%,-45%) rotate(6deg) scale(.65); }
 .hero-stage .stage-caption { bottom:4px; font-size:8px; }
}