/* ARGINO — concept A. Real pages, normal document flow.
   Nothing is position:fixed. Nothing overlaps by construction.
   Product sketches are drawn to true relative scale: 1 SVG unit = 1 mm. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#1A1917;
  --cream:#E8E0D0;
  --dim:rgba(232,224,208,.56);
  --faint:rgba(232,224,208,.30);
  --rule:rgba(232,224,208,.14);
  --body:'Spectral',Georgia,serif;
  --display:'Neue Haas Grotesk Display','HelveticaNeue-Light','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mm:.80px;          /* one real millimetre, on screen */
  --logoW:210px;
}

html{ height:100%; }
body{
  min-height:100%; display:flex; flex-direction:column;
  font-family:var(--body); background:var(--bg); color:var(--cream);
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--cream); color:var(--bg); }

@keyframes arrive{ from{opacity:0} to{opacity:1} }
body{ animation:arrive .65s ease both; }
body.leaving{ opacity:0; transition:opacity .35s ease; animation:none; }
@media(prefers-reduced-motion:reduce){ body{animation:none} body.leaving{transition:none} }

/* ── masthead: inner pages only. The cover has no second wordmark. ── */
.masthead{ padding:clamp(32px,6vh,58px) 1.6rem clamp(26px,4vh,42px); text-align:center; }
.masthead a{ display:inline-block; line-height:0; }
.masthead svg{ width:96px; height:auto; color:var(--cream); display:block; }

/* ── content ── */
main{ flex:1 0 auto; width:100%; max-width:600px; margin:0 auto; padding:0 1.6rem clamp(4rem,9vh,7rem); }

.num{ display:block; font-family:var(--display); text-transform:uppercase;
      font-size:11.5px; letter-spacing:.3em; color:var(--faint); margin-bottom:2.1rem; }
h1{ font-family:var(--display); font-weight:200; text-transform:uppercase; letter-spacing:.05em;
    font-size:clamp(21px,3.4vw,32px); line-height:1.34; margin-bottom:2.6rem; color:var(--cream); }
h2{ font-family:var(--display); font-weight:200; text-transform:uppercase; letter-spacing:.06em;
    font-size:clamp(19px,2.8vw,26px); line-height:1.4; margin-bottom:2.6rem; color:var(--cream); }
.lead{ font-size:19px; line-height:1.72; color:#F3EEE3; margin-bottom:1.9rem; }
p{ font-size:16px; line-height:1.92; color:var(--dim); margin-bottom:1.7em; }
p.on-cream{ color:var(--cream); }
p em{ font-style:italic; color:var(--cream); }
.eyebrow{ display:block; font-family:var(--display); text-transform:uppercase;
          font-size:11.5px; letter-spacing:.28em; color:var(--faint); margin-bottom:2.4rem; }
.spec{ display:block; font-family:var(--display); text-transform:uppercase;
       font-size:11.5px; letter-spacing:.18em; line-height:2.3; color:var(--faint); margin-top:2.6rem; }
a.plain{ color:var(--cream); text-decoration:none; border-bottom:1px solid var(--rule); }
a.plain:hover{ border-bottom-color:var(--cream); }
.divide{ margin-top:5rem; padding-top:3.2rem; border-top:1px solid var(--rule); }

/* ── buy ── */
.buy{ display:flex; flex-wrap:wrap; align-items:center; gap:26px;
      margin-top:3rem; padding-top:2.6rem; border-top:1px solid var(--rule); }
.price{ font-family:var(--display); text-transform:uppercase; font-size:15px; letter-spacing:.14em; color:var(--cream); margin:0; }
.price span{ display:block; margin-top:.55rem; font-size:11.5px; letter-spacing:.18em; color:var(--faint); }
.cta{ display:inline-block; font-family:var(--display); text-transform:uppercase; font-size:13px;
      letter-spacing:.16em; color:var(--cream); border:1px solid var(--cream); padding:16px 38px;
      text-decoration:none; transition:background .25s,color .25s; }
.cta:hover{ background:var(--cream); color:var(--bg); }
.cta-lg{ padding:19px 52px; font-size:13px; letter-spacing:.2em; }

/* ── navigation ── */
.nav{ flex:0 0 auto; display:flex; flex-wrap:wrap; justify-content:center;
      gap:clamp(16px,4.4vw,54px); padding:28px 1.4rem 34px; border-top:1px solid var(--rule); }
.nav a{ font-family:var(--display); text-transform:uppercase; font-size:12px; font-weight:300;
        letter-spacing:.24em; color:var(--faint); text-decoration:none; transition:color .35s; }
.nav a:hover{ color:var(--dim); }
.nav a[aria-current="page"]{ color:var(--cream); }
@media(max-width:640px){ .nav{ gap:14px; padding:22px 1rem 26px; } .nav a{ font-size:11px; letter-spacing:.15em; } }

/* ═══════════ COVER ═══════════ */
body.cover main{ max-width:none; padding:0; }
.screen{ min-height:100svh; display:flex; flex-direction:column; align-items:center;
         justify-content:center; text-align:center; padding:2rem 1.6rem; }
.cover-mark{ display:block; line-height:0; }
.cover-mark svg{ width:min(74vw,440px); height:auto; color:var(--cream); display:block; }

/* The stone. Two transforms compose here and must not fight:
   the WRAPPER carries the scroll-driven roll (JS, inline style);
   the SVG inside carries the idle nudge (CSS keyframes). Putting both on one
   element would let the animation override the inline style silently. */
.stone{ margin-top:clamp(3.4rem,10vh,6rem); display:inline-block; line-height:0;
        padding:8px; opacity:0; transition:opacity .45s ease; will-change:transform,opacity; }
.stone svg{ width:44px; height:auto; display:block;
            animation:nudge 2.8s cubic-bezier(.42,0,.4,1) 3s infinite; }
/* once the reader has scrolled, the invitation has been accepted — stop nudging */
.stone.rolled svg{ animation:none; }

@keyframes nudge{
  0%        { transform:translateY(0)    rotate(0deg);  }
  38%       { transform:translateY(12px) rotate(16deg); }
  62%       { transform:translateY(5px)  rotate(9deg);  }
  100%      { transform:translateY(0)    rotate(0deg);  }
}
@media(prefers-reduced-motion:reduce){ .stone{ transition:none } .stone svg{ animation:none } }

/* ═══════════ HERO — no second wordmark ═══════════ */
/* the line gets a screen, the objects get a screen: scrolling brings each to the middle */
.hero{ min-height:100svh; display:flex; align-items:center; justify-content:center;
       padding:2rem 1.6rem; text-align:center; }
.products{ min-height:100svh; display:flex; align-items:center; justify-content:center;
           padding:3rem 1.6rem clamp(3rem,8vh,6rem); }
.hero-line{ font-family:var(--display); text-transform:uppercase; font-weight:200;
            font-size:clamp(17px,2.5vw,24px); letter-spacing:.07em; line-height:1.5; color:var(--cream); }

/* ── the two objects, hand-drawn, three-quarter view from the spine ── */
.shelf{ display:flex; align-items:flex-end; justify-content:center; gap:clamp(34px,6vw,88px); }
.product{ position:relative; display:block; text-decoration:none; flex:0 0 auto; text-align:center; }
.sketch{ display:block; color:var(--cream); overflow:visible;
         transition:transform .55s cubic-bezier(.4,0,.2,1); }
.product:hover .sketch,.product:focus-visible .sketch{ transform:translateY(-6px); }
/* viewBoxes are trimmed to the ink, so the element's edge is the drawing's edge */
.sk-book{ width:calc(197 * var(--mm)); }   /* 197 units of drawing; the cover inside is 170 mm */
.sk-mag{  width:calc(242 * var(--mm)); }   /* 242 units of drawing; the cover inside is 230 mm */

/* The tagline is wider than either drawing, so it — not the sketch — sets the
   column width. Push each sketch to the same edge its text is set to. */
.product--book .sketch{ margin-left:auto;  margin-right:0; }
.product--mag  .sketch{ margin-right:auto; margin-left:0; }

/* Name and tagline travel together as one block. The block is pushed toward the
   inside edge of each column, so the two headlines face each other across the gap.
   Inside the block both lines stay centred on one another. */
.labels{ display:block; width:100%; margin-top:1.6rem; }
.product--book .labels{ text-align:right; }   /* faces the magazine */
.product--mag  .labels{ text-align:left;  }   /* faces the thoughtbook */
/* letter-spacing adds a trailing space after the last letter, which reads as a
   ragged edge when the text is flush right. Pull it back by the same amount. */
.product--book .pname{ margin-right:-.26em; }
.product--book .ptag{  margin-right:-.20em; }

.pname{ display:block; font-family:var(--display); text-transform:uppercase;
        font-weight:300; font-size:15px; letter-spacing:.26em; color:var(--cream); }
.ptag{ display:block; margin-top:.9rem; font-family:var(--display); text-transform:uppercase;
       font-weight:300; font-size:12px; letter-spacing:.2em; color:var(--dim); }
.motto{ font-family:var(--display); text-transform:uppercase; font-weight:300;
        font-size:13px; letter-spacing:.24em; color:var(--dim); margin-bottom:1.6rem; }

/* description — hidden until the cursor is on the sketch or the name */
.caption{ position:absolute; top:0; width:clamp(180px,19vw,235px); }
.caption .said{ display:block; font-size:15.5px; line-height:1.75; color:var(--dim); }
.caption .when{ display:block; margin-top:1rem; font-family:var(--display); text-transform:uppercase;
                font-size:11.5px; letter-spacing:.2em; color:var(--faint); }
.cap-left{ right:100%; margin-right:clamp(22px,3vw,40px); text-align:right; }
.cap-right{ left:100%; margin-left:clamp(22px,3vw,40px); text-align:left; }

/* Pointer devices: hover only. Never visible until hovered. */
@media (hover: hover) and (pointer: fine){
  .caption{ opacity:0; transition:opacity .45s ease; pointer-events:none; }
  .product:hover .caption,.product:focus-within .caption{ opacity:1; }
}
/* Touch devices have no hover at all, so the copy sits under the object instead. */
@media (hover: none){
  .shelf{ align-items:flex-start; }
  .product--book .labels,.product--mag .labels{ text-align:center; }
  .product--book .sketch,.product--mag .sketch{ margin-left:auto; margin-right:auto; }
  .product--book .pname,.product--book .ptag{ margin-right:0; }
  .product{ display:flex; flex-direction:column; align-items:center; }
  .caption{ position:static; width:auto; max-width:calc(230 * var(--mm) + 40px); margin-top:1.4rem; text-align:center; }
  .cap-left,.cap-right{ margin-left:0; margin-right:0; text-align:center; }
  .caption .said{ font-size:14px; }
}
@media(max-width:900px){ :root{ --mm:.52px; } }
@media(max-width:640px){ :root{ --mm:.40px; --logoW:160px; } .shelf{ gap:22px; } .pname{ font-size:13px; letter-spacing:.18em; } .ptag{ font-size:11px; letter-spacing:.14em; } }

/* ── "the other one" at the foot of a product page ── */
.crosslink{ margin-top:5rem; padding-top:3.2rem; border-top:1px solid var(--rule);
            display:flex; align-items:center; gap:clamp(24px,4vw,44px); }
.crosslink .product{ flex:0 0 auto; }
.crosslink .words{ flex:1 1 auto; }
.crosslink .kicker{ display:block; font-family:var(--display); text-transform:uppercase;
                    font-size:11.5px; letter-spacing:.28em; color:var(--faint); margin-bottom:1rem; }
.crosslink h3{ font-family:var(--display); font-weight:200; text-transform:uppercase; letter-spacing:.06em;
               font-size:clamp(17px,2.4vw,22px); line-height:1.4; color:var(--cream); margin-bottom:1rem; }
.crosslink p{ font-size:15.5px; margin-bottom:1.2rem; }
.crosslink .go{ font-family:var(--display); text-transform:uppercase; font-size:11.5px;
                letter-spacing:.22em; color:var(--cream); text-decoration:none;
                border-bottom:1px solid var(--rule); padding-bottom:5px; }
.crosslink .go:hover{ border-bottom-color:var(--cream); }
@media(max-width:640px){ .crosslink{ flex-direction:column; align-items:flex-start; } }

/* ── shop: picture plates, awaiting photography ── */
.plates{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:3.4rem; }
.plate{ position:relative; border:1px solid var(--rule); background:rgba(232,224,208,.028);
        display:flex; align-items:center; justify-content:center; }
.plate.tall{ aspect-ratio:170 / 240; } .plate.wide{ aspect-ratio:4 / 3; }
.plate span{ font-family:var(--display); text-transform:uppercase; font-size:11px;
             letter-spacing:.22em; color:var(--faint); text-align:center; padding:1rem; line-height:2; }

/* ── email list (in place of checkout until pre-orders open) ── */
.join{ margin-top:2.6rem; }
.join-head{ font-family:var(--display); text-transform:uppercase; font-weight:300;
            font-size:13px; letter-spacing:.24em; color:var(--cream); margin-bottom:1.2rem; }
.ml-form{ display:flex; gap:12px; max-width:440px; margin-top:.4rem; }
.ml-form input[type=email]{ flex:1; min-width:0; font-family:var(--display); font-size:16px; padding:15px 4px;
  border:none; border-bottom:1px solid var(--dim); background:transparent; color:var(--cream);
  border-radius:0; outline:none; transition:border-color .2s; }
.ml-form input[type=email]::placeholder{ color:var(--faint); }
.ml-form input[type=email]:focus, .ml-form input.invalid{ border-color:var(--cream); }
.ml-form button{ font-family:var(--display); text-transform:uppercase; font-size:12px; letter-spacing:.16em;
  color:var(--cream); background:transparent; border:1px solid var(--cream); border-radius:0;
  padding:15px 26px; cursor:pointer; transition:background .25s,color .25s; white-space:nowrap; }
.ml-form button:hover{ background:var(--cream); color:var(--bg); }
.ml-confirm{ display:none; font-style:italic; color:var(--cream); }
.subscribed .ml-form{ display:none; }
.subscribed .ml-confirm{ display:block; }
@media(max-width:480px){ .ml-form{ flex-direction:column; } }