@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Work+Sans:wght@400;500;600;700&display=swap');

:root {
  --cream: #f3e7c7;
  --paper: #fbf2da;
  --indigo: #15364b;
  --water: #709c8a;
  --water-dark: #365f58;
  --cranberry: #a74645;
  --saffron: #d9a633;
  --brass: #9f7d32;
  --muted: #5f706b;
  --line: rgba(21,54,75,.22);
  --line-soft: rgba(21,54,75,.11);
  --shadow: 0 18px 42px rgba(43,54,43,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--indigo); background: var(--cream); font-family: "Work Sans", system-ui, sans-serif; line-height: 1.55; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; }
.header { height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 0 clamp(20px,5vw,78px); border-bottom: 1px solid var(--line); background: var(--paper); }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; font-weight: 700; line-height: 1.15; letter-spacing: .12em; text-decoration: none; }
.brand strong { color: var(--cranberry); font-size: 13px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--indigo); border-radius: 50%; background: var(--indigo); color: var(--paper); font-family: "Libre Caslon Display",serif; font-size: 23px; font-weight: 400; }
nav { display: flex; gap: 30px; } nav a, footer a { color: var(--muted); font-size: 12px; font-weight: 600; text-decoration: none; } nav a:hover, footer a:hover { color: var(--cranberry); }
.header-link { color: var(--cranberry); font-size: 12px; font-weight: 700; text-decoration: none; }
.hero { min-height: 690px; display: grid; grid-template-columns: 43% 57%; }
.hero-copy { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 70px clamp(28px,6vw,96px); background: radial-gradient(circle at 20% 25%,rgba(217,166,51,.15),transparent 28%),var(--paper); }
.hero-art { min-height: 620px; border-left: 1px solid var(--line); background: url("../assets/images/fieldmark-study.png") 60% center/cover no-repeat; }
.catalog { margin: 0 0 17px; color: var(--cranberry); font-size: 9px; font-weight: 700; letter-spacing: .2em; }
h1,h2,h3 { font-family: "Libre Caslon Display", Georgia, serif; line-height: .98; font-weight: 400; }
h1 { margin: 0; font-size: clamp(60px,7vw,108px); letter-spacing: -.045em; }
h1 em { color: var(--cranberry); font-style: italic; }
.hero-copy > p:not(.catalog):not(.margin-note) { max-width: 500px; margin: 28px 0; color: var(--muted); font-size: 17px; }
.atlas-button { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; border: 1px solid var(--indigo); border-radius: 2px; background: var(--indigo); color: var(--paper); font-size: 12px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 var(--saffron); transition: transform .15s; }
.atlas-button:hover { transform: translate(2px,2px); }
.atlas-button:focus-visible,button:focus-visible,a:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; }
.margin-note { position: absolute; right: 24px; bottom: 26px; padding-left: 13px; border-left: 2px solid var(--cranberry); color: var(--cranberry); font-family: "Libre Caslon Display",serif; font-size: 12px; font-style: italic; }
.study-section { padding: 105px clamp(14px,6vw,96px); }
.section-heading { max-width: 1240px; margin: 0 auto 46px; display: grid; grid-template-columns: 1fr .7fr; gap: 90px; align-items: end; }
.section-heading h2,.method-section h2,.archive-section h2 { margin: 0; font-size: clamp(49px,5.8vw,84px); letter-spacing: -.035em; }
.section-heading > p { margin: 0; color: var(--muted); }
.study-desk { max-width: 1240px; margin: auto; display: grid; grid-template-columns: 260px 1fr; gap: 22px; align-items: start; }
.clue-card { padding: 18px; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); transform: rotate(-.7deg); }
.card-top { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.card-top b { color: var(--cranberry); }
.clue-illustration { height: 130px; display: grid; place-items: center; margin: 12px 0; background: rgba(112,156,138,.12); overflow: hidden; }
.clue-illustration span { --fish-color:#a74645; width: 120px; height: 48px; position: relative; border-radius: 60% 48% 48% 60%; background: var(--fish-color); transform: scaleX(var(--dir,1)); }
.clue-illustration span::before { content:""; position:absolute; left:-30px; top:8px; border-right:35px solid var(--fish-color); border-top:16px solid transparent; border-bottom:16px solid transparent; }
.clue-illustration span::after { content:""; position:absolute; right:17px; top:12px; width:5px; height:5px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 2px var(--indigo); }
.clue-illustration.stripes span { background: repeating-linear-gradient(90deg,var(--fish-color) 0 17px,var(--indigo) 18px 23px); }
.clue-illustration.dots span { background-color:var(--fish-color); background-image:radial-gradient(var(--indigo) 0 3px,transparent 4px); background-size:17px 14px; }
.clue-card dl { margin: 0; }
.clue-card dl > div { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.clue-card dt { color: var(--muted); font-size: 8px; letter-spacing: .14em; }
.clue-card dd { margin: 2px 0 0; font-family:"Libre Caslon Display",serif; font-size:20px; }
.lens-button { width:100%; min-height:66px; display:grid; grid-template-columns:36px 1fr; align-items:center; margin-top:10px; border:1px solid var(--brass); background:rgba(217,166,51,.12); color:var(--indigo); cursor:pointer; text-align:left; }
.lens-button span { grid-row:span 2; text-align:center; color:var(--brass); font-size:28px; }.lens-button strong{font-size:10px;letter-spacing:.1em}.lens-button small{font-size:7px;color:var(--muted)}.lens-button:disabled{opacity:.4;cursor:not-allowed}
.observation-panel { border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); }
.study-meta { display:grid; grid-template-columns:repeat(6,1fr); border-bottom:1px solid var(--line); }
.study-meta>div { padding:12px 14px; border-right:1px solid var(--line-soft); }.study-meta>div:last-child{border-right:0}
.study-meta small,.status-strip span { display:block;color:var(--muted);font-size:7px;font-weight:700;letter-spacing:.13em }.study-meta strong{font-family:"Libre Caslon Display",serif;font-size:21px}
.canvas-frame { position:relative; aspect-ratio:45/29; overflow:hidden; background:var(--water); }
#gameCanvas { display:block;width:100%;height:100%;touch-action:none;cursor:crosshair; }
.grid-overlay { position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--line-soft) 1px,transparent 1px),linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);background-size:58px 58px;mix-blend-mode:multiply }
.game-overlay { position:absolute;z-index:4;inset:0;display:none;place-items:center;align-content:center;padding:24px;text-align:center;background:rgba(251,242,218,.92);backdrop-filter:blur(4px) }
.game-overlay.open{display:grid}.wax-seal{width:58px;height:58px;display:grid;place-items:center;margin-bottom:14px;border-radius:50%;background:var(--cranberry);color:var(--paper);font-family:"Libre Caslon Display",serif;box-shadow:inset 0 0 0 4px rgba(251,242,218,.2)}
.game-overlay h3{margin:0;font-size:clamp(38px,5vw,58px)}.game-overlay>p:not(.catalog){max-width:480px;margin:14px auto 22px;color:var(--muted)}.game-overlay .atlas-button{margin:auto}
.status-strip { min-height:50px;display:flex;align-items:center;gap:10px;padding:10px 15px;border-top:1px solid var(--line);font-size:11px }.status-strip i{width:8px;height:8px;border-radius:50%;background:var(--cranberry)}.status-strip strong{font-size:11px}
.method-section { display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;padding:110px clamp(24px,8vw,130px);background:var(--indigo);color:var(--paper) }
.method-section .catalog{color:var(--saffron)}.method-section ol{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none}
.method-section li{padding:20px 24px;border-left:1px solid rgba(251,242,218,.2)}.method-section li>span{color:var(--saffron);font-family:"Libre Caslon Display",serif}.method-section h3{margin:18px 0 8px;font-size:28px}.method-section p{margin:0;color:#bdcbc5;font-size:13px}
.archive-section { min-height:620px;display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:center;padding:100px clamp(24px,9vw,145px);background:var(--water) }
.archive-figure{height:390px;position:relative;display:grid;place-items:center;border:1px solid rgba(21,54,75,.3);background:rgba(251,242,218,.2)}.archive-figure span{color:var(--indigo);font-size:220px;transform:scaleX(1.5)}.archive-figure i{position:absolute;width:180px;height:180px;border:12px solid rgba(159,125,50,.75);border-radius:50%;box-shadow:0 8px 0 rgba(21,54,75,.18)}.archive-figure b{position:absolute;bottom:20px;right:22px;color:var(--cranberry);font-size:10px;letter-spacing:.18em}.archive-section p:not(.catalog){color:#31564f}.archive-section a{color:var(--cranberry);font-size:11px;font-weight:700;text-decoration:none;text-transform:uppercase}
footer{min-height:130px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px clamp(20px,5vw,78px);background:var(--paper);border-top:1px solid var(--line)}footer p{color:var(--muted);font-size:10px}footer>div{display:flex;gap:22px}
.toast{position:fixed;z-index:30;left:50%;bottom:24px;transform:translate(-50%,18px);padding:10px 18px;border:1px solid var(--indigo);background:var(--paper);color:var(--indigo);box-shadow:var(--shadow);font-size:11px;font-weight:700;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.legal-main{min-height:calc(100vh - 206px);padding:85px 24px;background:var(--cream)}.legal-copy{max-width:760px;margin:auto}.legal-copy h1{margin:0 0 28px;font-size:clamp(62px,9vw,105px)}.legal-copy h2{margin-top:36px;font-size:30px}.legal-copy p{color:var(--muted)}.back-link{display:inline-block;margin-bottom:32px;color:var(--cranberry);font-size:11px;font-weight:700;text-decoration:none}
@media(max-width:930px){nav{display:none}.hero{grid-template-columns:1fr}.hero-copy{min-height:570px}.hero-art{min-height:500px;border-left:0;border-top:1px solid var(--line)}.study-desk{grid-template-columns:1fr}.clue-card{display:grid;grid-template-columns:.7fr 1fr 1fr;gap:14px;align-items:center;transform:none}.card-top{grid-column:1/-1}.clue-card dl{display:grid;grid-template-columns:repeat(3,1fr)}.lens-button{margin:0}.method-section,.archive-section{grid-template-columns:1fr}}
@media(max-width:650px){.header{height:66px;padding:0 15px}.header-link{display:none}.hero-copy{min-height:590px;padding:58px 24px}.hero-art{min-height:340px;background-position:65% center}.margin-note{display:none}.study-section{padding:72px 10px}.section-heading{grid-template-columns:1fr;gap:18px;padding:0 14px}.section-heading h2,.method-section h2,.archive-section h2{font-size:53px}.clue-card{display:block}.clue-illustration{height:105px}.clue-card dl{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.clue-card dd{font-size:15px}.lens-button{margin-top:10px}.study-meta{grid-template-columns:repeat(3,1fr)}.study-meta>div{padding:8px 9px}.canvas-frame{aspect-ratio:45/29}.method-section,.archive-section{padding:75px 24px}.method-section ol{grid-template-columns:1fr}.method-section li{border-left:0;border-top:1px solid rgba(251,242,218,.2)}.archive-figure{height:280px}.archive-figure span{font-size:140px}footer{flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* Big Bass Reed Atlas: independent art direction */
body[data-variant="notebook"]{background:#f5efd9;font-family:Palatino, Georgia, serif}
body[data-variant="notebook"] .hero{position:relative}
body[data-variant="notebook"] .variant-note{z-index:3;max-width:34rem;padding:1rem 1.15rem;background:#f5efd9;color:#214e34;border:2px solid #214e34;font-family:Palatino, Georgia, serif;box-shadow:8px 8px 0 #b94a2d}
body[data-variant="notebook"] .variant-note span{display:block;margin-bottom:.55rem;color:#b94a2d;font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
body[data-variant="notebook"] .variant-note p{margin:0!important;color:inherit!important;font:700 1rem/1.4 Palatino, Georgia, serif!important;letter-spacing:0!important;text-transform:none!important}
body[data-variant="notebook"] canvas{max-width:100%}
@media(max-width:760px){
 body[data-variant="notebook"] .variant-note{position:static!important;width:auto!important;max-width:none!important;margin:1.5rem 0 0!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #b94a2d!important}
}

body[data-variant="notebook"]{background-color:#f5efd9;background-image:linear-gradient(#214e3415 1px,transparent 1px);background-size:100% 31px}
body[data-variant="notebook"] .header{background:#214e34;color:#f5efd9}
body[data-variant="notebook"] .hero{width:min(1180px,92%);margin:3rem auto;transform:rotate(-.5deg);box-shadow:0 18px 45px #0002;border:1px solid #aaa087}
body[data-variant="notebook"] .hero-copy{background:#f5efd9}
body[data-variant="notebook"] .hero h1{text-decoration:underline;text-decoration-color:#b94a2d;text-underline-offset:12px}
body[data-variant="notebook"] .variant-note{transform:rotate(2deg);border-style:dashed;background:#fffaf0}
body[data-variant="notebook"] .study-section{border-top:3px double #214e34}
body[data-variant="notebook"] .header .brand strong,body[data-variant="notebook"] .header nav a,body[data-variant="notebook"] .header .header-link{color:#f5efd9}
body[data-variant="notebook"] .archive-section{background:#d9e6d9}
body[data-variant="notebook"] .archive-section h2,body[data-variant="notebook"] .archive-section p:not(.catalog){color:#173f2b}
body[data-variant="notebook"] .archive-section .catalog,body[data-variant="notebook"] .archive-section a{color:#7c2f24}
@media(max-width:760px){
  body[data-variant="notebook"]{overflow-x:hidden}
  body[data-variant="notebook"] header nav a:not(:first-child),
  body[data-variant="notebook"] header nav button{display:none!important}
  body[data-variant="notebook"] .hero{width:100%!important;margin-inline:0!important;display:block!important;clip-path:none!important;transform:none!important}
  body[data-variant="notebook"] .hero-copy{width:100%!important;max-width:calc(100vw - 40px)!important}
  body[data-variant="notebook"] .section-intro,
  body[data-variant="notebook"] .section-heading,
  body[data-variant="notebook"] .section-title{width:100%!important;max-width:calc(100vw - 20px)!important;grid-template-columns:1fr!important}
  body[data-variant="notebook"] .hero p,
  body[data-variant="notebook"] .section-intro > p,
  body[data-variant="notebook"] .variant-note p{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="notebook"] .hero h1{display:block!important;width:100%!important;max-width:100%!important;font-size:42px!important;line-height:.92!important;white-space:normal!important;word-break:normal!important;overflow-wrap:anywhere!important;transform:none!important}
  body[data-variant="notebook"] .section-intro h2,
  body[data-variant="notebook"] .section-heading h2,
  body[data-variant="notebook"] .section-title h2{display:block!important;width:100%!important;max-width:100%!important;font-size:36px!important;line-height:.98!important;white-space:normal!important;overflow-wrap:anywhere!important}
  body[data-variant="notebook"] .variant-note{position:static!important;display:block!important;box-sizing:border-box!important;width:calc(100vw - 40px)!important;max-width:calc(100vw - 40px)!important;min-height:0!important;aspect-ratio:auto!important;margin:1.5rem 0 0!important;border-radius:12px!important;transform:none!important;clip-path:none!important;box-shadow:5px 5px 0 #b94a2d!important;columns:1!important}
  body[data-variant="notebook"] .game-section,
  body[data-variant="notebook"] .game-shell,
  body[data-variant="notebook"] .mission-shell,
  body[data-variant="notebook"] .cabinet-section,
  body[data-variant="notebook"] .control-section{max-width:100vw!important;margin-inline:0!important;border-inline:0!important;box-shadow:none!important}
  body[data-variant="notebook"] .game-section{padding-inline:10px!important}
}