/* AI Firsthand: the newsletter's page (8 Oct 2026). Gonzalo's proposal for the three steps of subscribing (sign up, check
   your inbox, confirmed), in the landing's look and feel: his words and his order, the site's pieces.
   - The first view is two halves, the Get started sheet's grammar turned into a page: at the left, on the dark bands' moving
     silk, what the newsletter is; at the right, on Warm Sand, the paper that changes from step to step. The form on it is
     the site's own (components/form/form.css, linked before this file): the label inside the field until it's used, the
     warm family, the message in the room above the field.
   - Under it, the four columns as a list on hairlines in the page's rail and stage, and who writes it on a Sea Foam band.
   The book's rules hold: the tokens and their pairs, PP Neue Montreal at 400 and 500, the spacing set, radius 4, no
   shadows, no opacity on a brand colour. What's outside the book is listed in the README beside this file. */

/* PP Neue Montreal from homepage/fonts/ (git-ignored; the web licence is unconfirmed). These come after base.css's, whose
   paths are relative to the homepage page itself, so they're the ones used here, as on the careers page. */
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Book.otf) format("opentype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Medium.otf) format("opentype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url(../fonts/PPNeueMontreal-Bold.otf) format("opentype");font-weight:700;font-style:normal;font-display:swap}

.nl{overflow-x:clip}

/* ---------- the first view: two halves ---------- */
/* Each half is the window's height or its own content's, whichever is more, so nothing is ever cut or scrolls inside a half.
   Both start their words on one line, a little above the middle of a laptop's window, and keep to the page's column on a
   wide screen: the left half's words begin where the lockup does, the right half's end where the nav's links do. */
.nl-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:100vh;min-height:100svh}
.nl-pitch,.nl-paper{display:flex;min-width:0}
.nl-paper{background:var(--sand);color:var(--fathom)}
.nl-in{width:100%;max-width:calc(var(--max) / 2);padding-block:calc(var(--nav) + clamp(32px,9vh,112px)) clamp(40px,7vh,80px)}
.nl-pitch .nl-in{margin-left:auto;padding-inline:var(--m) clamp(24px,5vw,96px)}
.nl-paper .nl-in{margin-right:auto;padding-inline:clamp(24px,5vw,96px) var(--m)}
/* the third step's page says little, so it's one view: its two halves take what the footer leaves of the window, and the
   page closes on the footer instead of on a stretch of empty paper (confirmed.html) */
.nl-short{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
.nl-short main{flex:1 0 auto;display:flex;flex-direction:column}
.nl-short .nl-hero{flex:1 0 auto;min-height:0}

/* the left half: the eyebrow is the view's one Sea Mist element, as on the home's hero; the title at the size the home's
   headline has (84 at 1920, 63 at 1440); the sentence a step under the subline; the paragraph in Coastal Grey */
.nl-pitch .detail{color:var(--mist)}
.nl-pitch .display{margin:clamp(20px,2.083vw,40px) 0 clamp(20px,1.667vw,32px);font-size:clamp(40px,4.375vw,84px)}
.nl-pitch .display:focus{outline:none}                      /* "Check your inbox" takes the focus when the page turns to it, so a screen reader says it: nothing to show for that */
.nl-intro{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.01em;max-width:30ch;text-wrap:pretty}
.nl-pitch .lead{margin-top:clamp(16px,1.25vw,24px);max-width:46ch;font-size:clamp(16px,1.042vw,20px);line-height:1.5;color:var(--grey)}
.nl-to{margin-top:12px;font-size:var(--t-lead);font-weight:500;line-height:1.3;overflow-wrap:anywhere}   /* the address the reader typed */
.nl-pitch .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,2.5vw,48px)}
.nl-note{margin-top:20px;max-width:46ch;font-size:15px;line-height:1.5;color:var(--grey)}

/* the right half, the paper: Warm Sand, Fathom the ink, Dark Gold for labels and notes, as on the sheet */
.nl-paper :focus-visible{outline-color:var(--fathom)}
.nl-paper .detail{color:var(--gold)}
.nl-sheet{max-width:520px}
.nl-sheet .detail{margin-bottom:12px}
.nl-title{font-size:clamp(26px,2.083vw,40px);font-weight:400;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
.nl-lead{margin-top:12px;max-width:44ch;font-size:clamp(16px,1.042vw,20px);line-height:1.45}

/* the three steps: a number over a short name, on a hairline that fills, as the home draws its steps and its tabs. A step
   still to come is in the labels' Dark Gold on a Warm Stone rule; one taken, or being taken, is in the ink on a Fathom one */
.nl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:520px;margin-bottom:clamp(32px,3.75vw,72px)}
.nl-steps li{position:relative;padding-top:12px;border-top:1px solid var(--stone);font-size:13px;font-weight:500;line-height:1.3;letter-spacing:.02em;color:var(--gold)}
.nl-steps li span{display:block;margin-bottom:4px}
.nl-steps li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--fathom);transform:scaleX(0);transform-origin:0 50%}
main[data-step=signup] .nl-steps li:nth-child(1),main[data-step=pending] .nl-steps li:nth-child(-n+2),main[data-step=confirmed] .nl-steps li{color:var(--fathom)}
main[data-step=signup] .nl-steps li:nth-child(1)::before,main[data-step=pending] .nl-steps li:nth-child(-n+2)::before,main[data-step=confirmed] .nl-steps li::before{transform:none}

/* the form: components/form/form.css draws the fields. Here, what this form adds: two fields side by side, the consent
   line, and what it says when the sending fails */
.nl-form{margin-top:clamp(20px,2.083vw,32px)}
.nl-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.nl-pair .cf-msg{max-width:calc(100% - 76px)}               /* a narrow field: the message has the room its floated label leaves */
.nl-paper .btn.warm{background:var(--stone);border-color:var(--stone);color:var(--fathom)}   /* the sheet's own button (form.css scopes it to the sheet) */
.nl-paper .btn.warm:hover{background:var(--gold);border-color:var(--gold);color:var(--white)}
.nl-consent{max-width:46ch;font-size:13px;line-height:1.5}  /* in the ink, not the notes' Dark Gold: it's what the reader agrees to, and it has to be read */
.nl-consent a,.nl-help a{text-underline-offset:3px}
.nl-fail{font-size:15px;font-weight:500;line-height:1.4}
.nl-fail[hidden],.nl-preview[hidden],.nl-to[hidden]{display:none}

/* what to do next: two rows on hairlines */
.nl-todo{margin-top:clamp(20px,2.083vw,32px);border-top:1px solid var(--fathom)}
.nl-todo li{padding-block:20px;border-bottom:1px solid var(--stone)}
.nl-todo h3{font-size:clamp(18px,1.39vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.01em}
.nl-todo p{margin-top:8px;font-size:clamp(15px,1.042vw,20px);line-height:1.5}
.nl-help{margin-top:20px;font-size:15px;line-height:1.5}
.nl-preview{margin-top:20px;padding-top:16px;border-top:1px solid var(--stone);font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:var(--gold)}

/* ---------- the page's two states (data-step on main, set by newsletter.js) ---------- */
main[data-step=signup] [data-when=pending],main[data-step=pending] [data-when=signup]{display:none}
/* without the script the address alone turns the page: #check-your-inbox is where Kit can send a reader whose browser
   posted the form by itself, and "Back to the form" leads to #subscribe, which turns it back */
main:not([data-js]):has(#check-your-inbox:target) [data-when=signup]{display:none}
main:not([data-js]):has(#check-your-inbox:target) [data-when=pending]{display:block}
main:not([data-js]):has(#check-your-inbox:target) .nl-steps li:nth-child(2){color:var(--fathom)}
main:not([data-js]):has(#check-your-inbox:target) .nl-steps li:nth-child(2)::before{transform:none}
/* turning: what's there goes first, quickly; what comes rises 10 px into place, the paper a beat behind the words, on the
   page's settle curve; the next step's rule fills meanwhile */
@media (prefers-reduced-motion:no-preference){
  .nl-steps li::before{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
  .nl-steps li{transition:color .3s ease}
  /* on arrival the step being taken fills its rule, once */
  main[data-step=signup]:not(.nl-moved) .nl-steps li:nth-child(1)::before,main[data-step=confirmed] .nl-steps li:nth-child(3)::before{animation:nl-fill .9s cubic-bezier(.2,.7,.2,1) .5s both}
  main.nl-leaving .nl-say,main.nl-leaving .nl-sheet{opacity:0;transition:opacity .18s ease}
  main.nl-moved .nl-say,main.nl-moved .nl-sheet{animation:nl-in .55s cubic-bezier(.2,.7,.2,1) both}
  main.nl-moved .nl-sheet{animation-delay:.1s}
  /* the first view comes in with the home hero's own entrance (base.css): the words it doesn't name, and the paper */
  html.motion .nl-intro,html.motion .nl-note,html.motion .nl-paper .nl-in{transition:opacity .9s ease var(--rv,0s),transform 1s cubic-bezier(.2,.7,.2,1) var(--rv,0s)}
  html.motion:not(.revealed) .nl-intro,html.motion:not(.revealed) .nl-note,html.motion:not(.revealed) .nl-paper .nl-in{opacity:0;transform:translateY(10px)}
  html.motion .nl-intro{--rv:.3s}html.motion .nl-paper .nl-in{--rv:.35s}html.motion .nl-note{--rv:.65s}
}
@keyframes nl-fill{from{transform:scaleX(0)}}
@keyframes nl-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- the nav over the two halves ---------- */
/* Clear over the first view, as over the home's hero, its ink white. Side by side, the lockup sits over the dark half and
   the links over the sand, so the links take the ink there, and their corner brackets Deep Teal: two inks over two
   grounds, as the nav has over the Get started sheet. Stacked, under 901 px, everything is over the dark half and stays white */
@media (min-width:901px){
  .nl .nav:not(.solid) ul{color:var(--fathom)}
  .nl .nav:not(.solid){--corner:var(--deep)}
  .nl .nav:not(.solid) ul :focus-visible{outline-color:var(--fathom)}
}

/* ---------- the four columns ---------- */
.nl-cols{border-top:1px solid var(--fathom)}
.nl-cols > div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:20px;align-items:baseline;padding-block:24px;border-bottom:1px solid var(--edge)}
.nl-cols dt{display:flex;align-items:baseline;gap:16px}
.nl-cols .tag{flex:none;min-width:44px;text-align:center;transform:translateY(-.2em)}   /* the tag's caps sit on the name's x-height, not its baseline */
.nl-cols dd{font-size:clamp(15px,1.042vw,20px);line-height:1.5;color:var(--deep)}

/* ---------- who writes it ---------- */
/* the portrait in the founders' own 4:5 frame, at their size (240 px at 1440), with the name and then the role under it,
   the book's order for a person; on Sea Foam the role is Deep Teal, as on the book's new-hire post (p96) */
.nl-editor .grid{align-items:center}
.nl-who .photo{width:clamp(160px,16.667vw,320px);aspect-ratio:4/5;border-radius:var(--r);background:var(--grey)}
.nl-name{font-size:clamp(18px,1.39vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.01em}
.nl-who .role{margin-top:4px;font-size:clamp(15px,1.042vw,20px);font-weight:500;line-height:1.4;color:var(--deep)}
.nl-thesis .sub{line-height:1.2;text-wrap:pretty}

/* ---------- footer: the home's (its rules live in the home's own page, so they're repeated here) ---------- */
.footer{padding-block:var(--head);font-size:15px}
.footer .grid{row-gap:40px}
.footer .brand{grid-column:1/span 4;display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.footer .brand img{height:32px;width:auto}
.footer .brand p{max-width:32ch;color:var(--deep)}
.footer .col{grid-column:span 2;display:flex;flex-direction:column;gap:12px}
.footer .col.first{grid-column:7/span 2}
.footer .col ul{display:flex;flex-direction:column;gap:8px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline;text-underline-offset:6px}
.footer .legal{grid-column:1/-1;border-top:1px solid var(--edge);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--deep)}
@media (max-width:900px){.footer .brand{grid-column:1/-1}.footer .col,.footer .col.first{grid-column:span 4}}
@media (max-width:760px){.footer .col,.footer .col.first{grid-column:span 6}.footer .col{gap:4px}.footer .col ul{gap:0}.footer .col li,.footer .col li a{display:flex;align-items:center;min-height:40px}}

/* ---------- narrower ---------- */
/* stacked: the dark half as a band above the paper, each as tall as its words. The title's place is right under the bar */
@media (max-width:900px){
  .nl-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .nl-in{max-width:none}
  .nl-pitch .nl-in{padding:calc(var(--nav) + 24px) var(--m) 40px}
  .nl-paper .nl-in{padding:32px var(--m) 48px}             /* "Subscribe" brings the paper to the bar's foot, not under it: base.css's scroll-padding */
  .nl-steps,.nl-sheet{max-width:560px}
}
@media (max-width:760px){
  .nl-cols > div{grid-template-columns:minmax(0,1fr);gap:8px}
  /* the portrait beside the name, as the founders are on a phone */
  .nl-who{flex-direction:row;align-items:center;gap:16px}
  .nl-who .photo{width:104px}
}
/* a phone: one field a row, so a message has the whole width beside its label */
@media (max-width:560px){
  .nl-pair{grid-template-columns:minmax(0,1fr);gap:12px}
  .nl-pair .cf-msg{max-width:62%}
  .nl-paper .cf-actions .btn{width:100%}
}