/* ============================================================
   Field Notebook — "Particle Anatomy" hero styles (homepage)
   Namespaced .at-*. Brand: sage · charcoal · off-white · rust,
   Fraunces / Inter / JetBrains Mono / Caveat.
   ============================================================ */
.at-hero{
  --at-paper:#F4F1EA;
  --at-paper-2:#ECE7DB;
  --at-ink:#1C1C1C;
  --at-ink-2:#4A453E;
  --at-sage:#5C7361;
  --at-sage-deep:#445648;
  --at-rust:#A85A3C;
  --at-line:rgba(28,28,28,.14);
  --at-font-display:"Fraunces", Georgia, "Times New Roman", serif;
  --at-font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --at-font-body:"Inter", system-ui, -apple-system, sans-serif;
  --at-font-hand:"Caveat", "Comic Sans MS", cursive;

  position:relative; width:100%;
  height:100svh; min-height:600px;        /* lock to one screen (point 2) */
  overflow:hidden;
  color:var(--at-ink); font-family:var(--at-font-body); -webkit-font-smoothing:antialiased;
  isolation:isolate;
  background:
    radial-gradient(68% 78% at 80% 44%, rgba(92,115,97,.12) 0%, rgba(92,115,97,0) 56%),
    radial-gradient(52% 58% at 92% 82%, rgba(92,115,97,.10) 0%, rgba(92,115,97,0) 60%),
    radial-gradient(140% 130% at 12% 8%, #F7F4ED 0%, #F1EDE4 46%, #E9E3D6 100%);
}
.at-hero *{box-sizing:border-box}

.at-hero__paper{position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(180deg, transparent 0 37px, rgba(68,86,72,.055) 37px 38px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 88%);
          mask-image:linear-gradient(90deg,#000 0%,#000 52%,transparent 88%);}
.at-hero__margin{position:absolute; top:0; bottom:0; left:clamp(20px,4.6vw,74px); width:1px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, var(--at-rust) 0%, rgba(168,90,60,.28) 62%, rgba(168,90,60,0) 100%); opacity:.55;}

.at-hero__canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1}

.at-hero__scrim{position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(115% 90% at 0% 50%, var(--at-paper) 0%, rgba(244,241,234,.72) 30%, rgba(244,241,234,0) 60%),
    linear-gradient(180deg, rgba(244,241,234,.45) 0%, rgba(244,241,234,0) 20%, rgba(244,241,234,0) 80%, rgba(244,241,234,.6) 100%);}

.at-hero__grain{position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  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='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* content column — vertically centred, viewport-height-aware so it always fits */
.at-hero__inner{position:relative; z-index:5; height:100%; display:flex; align-items:center;
  padding:clamp(82px,11vh,110px) clamp(30px,6vw,96px) clamp(60px,9vh,104px);}
.at-hero__content{max-width:620px; pointer-events:none}
.at-hero__content a,.at-hero__content .at-pill{pointer-events:auto}

.at-hero__eyebrow{font-family:var(--at-font-mono); font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--at-sage-deep); display:flex; align-items:center; gap:14px; margin:0 0 clamp(16px,2.4vh,28px);
  max-width:none; white-space:nowrap}   /* keep "from first principles" on one line */

.at-hero__title{font-family:var(--at-font-display); font-weight:330; line-height:.94; letter-spacing:-.02em;
  font-size:clamp(40px, min(8.4vw, 12.4vh), 112px); margin:0}
.at-hero__title em{font-style:italic; font-weight:330; color:var(--at-sage-deep)}
.at-hero__title .at-period{color:var(--at-sage-deep)}
.at-uline{position:relative; display:inline-block; white-space:nowrap}
.at-uline__s{position:absolute; left:-2%; right:-2%; bottom:-.16em; width:104%; height:.34em; overflow:visible}
.at-uline__s path{fill:none; stroke:var(--at-sage); stroke-width:6; stroke-linecap:round;
  stroke-dasharray:330; stroke-dashoffset:330; animation:atDraw 1.1s cubic-bezier(.22,.61,.36,1) .7s forwards}
@keyframes atDraw{to{stroke-dashoffset:0}}

.at-hero__sub{font-size:clamp(15px,1.5vw,18px); line-height:1.6; color:var(--at-ink-2); max-width:42ch; margin:clamp(16px,2.3vh,26px) 0 0}
.at-hero__sub b{color:var(--at-ink); font-weight:600}

.at-hero__hand{font-family:var(--at-font-hand); color:var(--at-rust); font-size:clamp(23px,2.4vw,31px); line-height:1;
  display:inline-block; transform:rotate(-3deg); margin:clamp(12px,1.8vh,22px) 0 0}

.at-hero__cta{display:flex; gap:14px; margin-top:clamp(18px,2.6vh,30px); flex-wrap:wrap; align-items:center}
.at-btn{font-family:var(--at-font-body); font-weight:560; font-size:14px; border-radius:999px; padding:14px 26px; text-decoration:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:9px; transition:transform .3s, background .3s, color .3s, border-color .3s, box-shadow .3s}
.at-btn .a{transition:transform .3s}
.at-btn--solid{background:var(--at-ink); color:var(--at-paper); border:1px solid var(--at-ink)}
.at-btn--solid:hover{transform:translateY(-2px); background:var(--at-sage-deep); border-color:var(--at-sage-deep); box-shadow:0 14px 30px -16px rgba(28,28,28,.55)}
.at-btn--solid:hover .a{transform:translateX(4px)}
.at-btn--ghost{border:1px solid var(--at-line); color:var(--at-ink); background:transparent}
.at-btn--ghost:hover{border-color:var(--at-ink); transform:translateY(-2px)}

.at-hero__pillars-label{font-family:var(--at-font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--at-sage-deep); margin:clamp(22px,3.4vh,44px) 0 13px; display:flex; align-items:center; gap:10px}
.at-hero__pillars{display:flex; gap:10px; flex-wrap:wrap}
/* chips carry a one-line meaning; no more "P—0x" code (point 1) */
.at-pill{font-family:var(--at-font-mono); background:rgba(255,255,255,.42); border:1px solid var(--at-line); border-radius:10px;
  padding:10px 15px; color:var(--at-ink-2); cursor:pointer; text-decoration:none; transition:all .3s;
  display:flex; flex-direction:column; gap:3px; min-width:116px; backdrop-filter:blur(2px)}
.at-pill__name{font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--at-ink)}
.at-pill__mean{font-family:var(--at-font-body); font-size:11.5px; letter-spacing:0; text-transform:none; color:var(--at-ink-2); opacity:.8}
.at-pill:hover,.at-pill:focus-visible{border-color:var(--at-ink); transform:translateY(-2px); outline:none}
.at-pill.is-active{background:var(--at-ink); border-color:var(--at-ink)}
.at-pill.is-active .at-pill__name{color:var(--at-paper)}
.at-pill.is-active .at-pill__mean{color:rgba(244,241,234,.72)}

/* right-side synced index — names + dot, no numbers (point 1 + point 3 balance) */
.at-hero__index{position:absolute; right:clamp(20px,4.6vw,74px); top:50%; transform:translateY(-50%); z-index:5;
  display:flex; flex-direction:column; gap:16px; align-items:flex-end; pointer-events:none}
.at-hero__index .ix{font-family:var(--at-font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--at-ink-2); opacity:.5; display:flex; align-items:center; gap:11px; transition:opacity .4s,color .4s}
.at-hero__index .ix .dot{width:6px; height:6px; border-radius:50%; border:1px solid var(--at-line); transition:.4s}
.at-hero__index .ix.on{opacity:1; color:var(--at-ink)}
.at-hero__index .ix.on .dot{background:var(--at-rust); border-color:var(--at-rust); transform:scale(1.5)}

.at-hero__spine{position:absolute; right:14px; top:50%; z-index:5; transform:translateY(-50%) rotate(180deg); writing-mode:vertical-rl;
  font-family:var(--at-font-mono); font-size:10px; letter-spacing:.42em; text-transform:uppercase; color:var(--at-ink-2); opacity:.34; pointer-events:none}

.at-hero__scroll{position:absolute; left:clamp(30px,6vw,96px); bottom:26px; z-index:5;
  font-family:var(--at-font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--at-ink-2);
  display:flex; align-items:center; gap:12px}
.at-hero__scroll .at-dash{width:34px; height:1px; background:var(--at-rust); opacity:.7; display:inline-block;
  transform-origin:left; animation:atDash 2.4s ease-in-out infinite}
@keyframes atDash{0%,100%{transform:scaleX(.4); opacity:.35} 50%{transform:scaleX(1); opacity:.8}}

.at-reveal{opacity:0; transform:translateY(24px); animation:atRise .95s cubic-bezier(.2,.7,.2,1) forwards}
.at-hero__eyebrow.at-reveal{animation-delay:.05s}
.at-hero__title.at-reveal{animation-delay:.12s}
.at-hero__sub.at-reveal{animation-delay:.22s}
.at-hero__hand.at-reveal{animation-delay:.30s}
.at-hero__cta.at-reveal{animation-delay:.38s}
.at-hero__pillars-label.at-reveal{animation-delay:.46s}
.at-hero__pillars.at-reveal{animation-delay:.52s}
.at-hero__index.at-reveal{animation-delay:.6s}
@keyframes atRise{to{opacity:1; transform:none}}

.at-hero--nofx .at-hero__canvas{display:none}

/* keep everything on one screen on shorter laptops */
@media (max-height:660px){
  .at-hero__hand{display:none}
  .at-hero__title{font-size:clamp(34px, 6.6vw, 60px)}
  .at-hero__pillars-label{margin-top:16px}
}
@media (max-width:900px){
  .at-hero__index,.at-hero__spine{display:none}
  .at-hero__content{max-width:none}
}
@media (max-width:760px){
  .at-hero{height:auto; min-height:100svh}
  .at-hero__inner{padding-top:118px}
  .at-hero__sub{max-width:none}
  .at-hero__scroll{display:none}
  .at-pill{min-width:calc(50% - 5px)}
  .at-hero__eyebrow{white-space:normal}
  /* keep the copy legible over the cloud on phones */
  .at-hero__canvas{opacity:.42}
  .at-hero__scrim{background:linear-gradient(180deg,rgba(244,241,234,.94) 0%,rgba(244,241,234,.82) 40%,rgba(244,241,234,.42) 64%,rgba(244,241,234,0) 100%)}
}
@media (prefers-reduced-motion: reduce){
  .at-reveal{animation:none; opacity:1; transform:none}
  .at-hero__scroll .at-dash,.at-uline__s path{animation:none}
  .at-uline__s path{stroke-dashoffset:0}
}