/* ==========================================================================
   WakimWorks LLC — "Paper"
   One ground, one typeface, hairlines and space doing the work.
   Versioned filename: the deploy pipeline never invalidates CloudFront, so a
   new name is the only guarantee of a fresh fetch. Bump it on every change.
   ========================================================================== */

:root{
  --paper:  #FAF8F4;
  --ink:    #1A1A18;
  --muted:  rgba(26,26,24,.60);
  --faint:  rgba(26,26,24,.42);
  --rule:   rgba(26,26,24,.11);
  --rule-2: rgba(26,26,24,.20);

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --pad: clamp(1.25rem, 4.4vw, 3.5rem);
  --maxw: 82rem;

  --t-eyebrow: 11.5px;
  --t-small:   13.5px;
  --t-body:    clamp(1rem, .97rem + .16vw, 1.09rem);
  --t-lede:    clamp(1.05rem, .99rem + .3vw, 1.19rem);
  --t-h2:      clamp(1.7rem, 1.35rem + 1.6vw, 2.9rem);
  --t-h1:      clamp(2.5rem, 1.5rem + 4.6vw, 4.75rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
h1,h2,h3,p,figure{ margin:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:var(--pad); top:-4rem; z-index:100;
  background:var(--ink); color:var(--paper);
  padding:.6rem 1rem; border-radius:4px; font-size:var(--t-small);
}
.skip-link:focus{ top:1rem; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); }

/* --- shared type -------------------------------------------------------- */
.eyebrow{
  font-size:var(--t-eyebrow);
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--faint);
}
.h1{
  font-size:var(--t-h1);
  line-height:1.02;
  letter-spacing:-.036em;
  font-weight:500;
  max-width:15ch;
  text-wrap:balance;
}
.h2{
  font-size:var(--t-h2);
  line-height:1.08;
  letter-spacing:-.028em;
  font-weight:500;
  max-width:20ch;
  text-wrap:balance;
}
.lede{ font-size:var(--t-lede); line-height:1.55; color:var(--muted); max-width:46ch; text-wrap:pretty; }
.copy{ color:var(--muted); max-width:58ch; text-wrap:pretty; }
.copy + .copy{ margin-top:1.1em; }
.copy strong{ color:var(--ink); font-weight:500; }

.link{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--rule-2);
  transition:text-decoration-color .2s ease;
}
.link:hover{ text-decoration-color:var(--ink); }

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:var(--t-small); font-weight:500;
  padding:.85rem 1.45rem;
  border:1px solid transparent; border-radius:6px;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn--solid{ background:var(--ink); color:var(--paper); }
.btn--solid:hover{ background:#000; }
.btn--ghost{ border-color:var(--rule-2); color:var(--ink); }
.btn--ghost:hover{ border-color:var(--ink); }

/* --- nav ---------------------------------------------------------------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background-color .25s ease, border-color .25s ease;
}
.nav.is-stuck{ background:var(--paper); border-bottom-color:var(--rule); }
.nav__inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:72px; }
.nav__brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; font-weight:600; letter-spacing:-.012em; font-size:15px; }
.nav__brand img{ width:24px; height:24px; object-fit:contain; }
.nav__links{ display:flex; align-items:center; gap:clamp(1.1rem,2.6vw,2rem); }
.nav__links a{ font-size:var(--t-small); text-decoration:none; color:var(--muted); transition:color .2s ease; }
.nav__links a:hover{ color:var(--ink); }

/* --- hero --------------------------------------------------------------- */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding-block:clamp(7rem,15vh,10rem) clamp(2rem,5vh,3rem);
}
.hero__title{ margin-top:1.4rem; }
.hero__lede{ margin-top:1.5rem; }
.hero__actions{ margin-top:2.2rem; display:flex; flex-wrap:wrap; gap:.6rem; }

/* --- sections ----------------------------------------------------------- */
/* top padding only — with padding on both sides every section seam stacked two
   full pads (104 + 104px at 1440) on top of the entry's own 52px */
.section{ padding-block:clamp(3rem,6.5vw,5rem) 0; }
.section:last-of-type{ padding-bottom:clamp(3rem,6.5vw,5rem); }
.section__head{ margin-bottom:clamp(2.25rem,5vw,3.25rem); }
.section__head .h2{ margin-top:1.1rem; }
/* where the head is only an eyebrow and the block below opens with its own
   hairline, the full head margin strands the label miles from its content */
.section__head--tight{ margin-bottom:1.1rem; }

/* --- products ----------------------------------------------------------- */
.entry{
  display:grid;
  grid-template-columns:5rem 1fr minmax(0,22rem);
  column-gap:clamp(1.5rem,4vw,3.5rem);
  row-gap:0;
  padding-block:clamp(2.25rem,5vw,3.25rem);
  border-top:1px solid var(--rule);
}
/* grid items default to min-width:auto and refuse to shrink below their
   content, which is how one long string drags the whole row off-screen */
.entry > *{ min-width:0; }
.entry:last-child{ border-bottom:1px solid var(--rule); }
.entry__num{ font-size:var(--t-small); color:var(--faint); font-variant-numeric:tabular-nums; padding-top:.3rem; }
.entry__name{ font-size:clamp(1.4rem,1.1rem + 1vw,2rem); font-weight:500; letter-spacing:-.024em; line-height:1.15; }
.entry__claim{ margin-top:.6rem; font-size:var(--t-lede); color:var(--muted); max-width:34ch; text-wrap:pretty; }
.entry__side{ display:flex; flex-direction:column; gap:1.4rem; }
.entry__desc{ font-size:var(--t-small); line-height:1.65; color:var(--muted); }
/* flex-wrap rather than inline: the tags are written with no whitespace between
   them, so as inline boxes they form one unbreakable run and blow out the grid. */
.entry__meta{
  display:flex; flex-wrap:wrap; column-gap:.5rem; row-gap:.15rem;
  font-size:var(--t-small); color:var(--faint); line-height:1.9;
}
.entry__meta i{ font-style:normal; white-space:nowrap; }
.entry__meta i:not(:last-child)::after{ content:"·"; margin-left:.5rem; color:var(--rule-2); }
.entry__go{ align-self:flex-start; }

/* product mark sits beside the name */
.entry__title{ display:flex; align-items:center; gap:.85rem; }
.entry__mark{ width:40px; height:40px; object-fit:contain; flex:none; }

/* product screenshot — a small thumbnail sitting in the gap under the claim,
   inside the middle column rather than spanning its own grid row */
.shot{ margin:clamp(1.1rem,2.4vw,1.6rem) 0 0; }
.shot__btn{
  display:block; padding:0; line-height:0; overflow:hidden;
  border:1px solid var(--rule); border-radius:8px;
  background:#fff; cursor:zoom-in;
  transition:border-color .2s ease;
}
.shot__btn:hover{ border-color:var(--rule-2); }
.shot__btn img{
  display:block;
  width:auto; height:auto;
  max-width:100%; max-height:230px;
}
.shot__cap{ margin-top:.55rem; font-size:12px; color:var(--faint); }

/* ---- lightbox ---- */
.lightbox{
  width:100vw; height:100dvh; max-width:100vw; max-height:100dvh;
  margin:0; padding:0; border:0; background:transparent; overflow:hidden;
}
.lightbox[open]{ display:grid; place-items:center; align-content:center; gap:.9rem; }
.lightbox::backdrop{ background:rgba(20,22,18,.86); }
.lightbox img{
  display:block;
  width:auto; height:auto;
  max-width:94vw; max-height:82dvh;
  border-radius:8px; background:#fff;
}
.lightbox__bar{ display:flex; justify-content:flex-end; width:min(94vw,100%); }

@media (max-width:900px){
  .entry{ grid-template-columns:2.5rem 1fr; }
  .entry__side{ grid-column:2; }
}

/* --- about -------------------------------------------------------------- */
.about{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));
  gap:clamp(1.75rem,5vw,4rem);
  align-items:start;
  border-top:1px solid var(--rule);
  padding-top:clamp(2.5rem,6vw,4rem);
}

/* --- contact ------------------------------------------------------------ */
.contact{ border-top:1px solid var(--rule); padding-top:clamp(2.5rem,6vw,4rem); }
.contact__mail{
  display:inline-block;
  margin-top:1.2rem;
  font-size:clamp(1.5rem,1rem + 2.6vw,3rem);
  letter-spacing:-.03em;
  font-weight:500;
  line-height:1.1;
  text-decoration:none;
  border-bottom:1px solid var(--rule-2);
  padding-bottom:.12em;
  transition:border-color .2s ease;
  word-break:break-word;
}
.contact__mail:hover{ border-bottom-color:var(--ink); }
.contact__note{ margin-top:1.4rem; font-size:var(--t-small); color:var(--muted); max-width:42ch; }

/* --- footer ------------------------------------------------------------- */
.footer{ border-top:1px solid var(--rule); padding-block:2.5rem 3rem; }
.footer__inner{ display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between; }
.footer__meta{ font-size:var(--t-small); color:var(--faint); }
.footer__social{ display:flex; flex-wrap:wrap; gap:clamp(.9rem,2.4vw,1.75rem); }
.footer__social a{ font-size:var(--t-small); text-decoration:none; color:var(--muted); transition:color .2s ease; }
.footer__social a:hover{ color:var(--ink); }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}