/* ============================================================
   hopala.css — the house visual system, lifted verbatim from
   the live hopala.io stylesheet. Drop this in and everything
   inherits the brand: warm cream paper, ink + coral + sage,
   hand-cut corners, hard "sticker" shadows, paper grain.

   Fonts: the three @font-face URLs below point at ./fonts/*.
   Copy this file's sibling  fonts/  folder to wherever you
   serve assets, or rewrite the url()s. Fonts are self-hosted
   ON PURPOSE — no Google Fonts / CDN calls (privacy).
   ============================================================ */

/* ---- fonts ------------------------------------------------ */
/* Assistant = body. The weight descriptor MUST stay a RANGE
   (200 800). Pin it to one value and the variable axis locks
   and everything renders ExtraLight with fake synthetic bold. */
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;src:url('./fonts/assistant-hebrew.woff2') format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Assistant';font-style:normal;font-weight:200 800;font-display:swap;src:url('./fonts/assistant-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* Fredoka = headings + logo. Variable TTF, ships Hebrew glyphs. */
@font-face{ font-family:'Fredoka'; src:url('./fonts/Fredoka.ttf') format('truetype-variations'); font-weight:300 700; font-display:swap; }

/* ---- design tokens (identical in index.html + blog.css) ---- */
:root{
  --paper:#FAF9F5;       /* page background — warm cream, NEVER pure white */
  --paper2:#F0EEE6;      /* secondary surface (nav hover, code, wells) */
  --paper3:#E8E6DC;      /* tertiary surface */
  --pad-bg:#FCFAF1;      /* "notepad" fill — cards, hero screen, form */
  --line:#D1CFC5;        /* borders */
  --hairline:#DEDCD2;    /* faint dividers / section rules */
  --ink:#141413;         /* primary text + primary buttons — near-black */
  --ink-soft:#3D3D3A;    /* body-emphasis text */
  --muted:#5E5D59;       /* muted text */
  --clay:#D97757;        /* BRAND CORAL — primary accent (== Anthropic coral / Claude mark) */
  --book:#CC785C;        /* "book cloth" coral — hand-drawn draw strokes */
  --clay-deep:#C6613F;   /* decorative / large text + button hover only */
  --clay-text:#A8482A;   /* AA-safe coral for SMALL text (5.5:1) */
  --sage-text:#3E7561;   /* AA-safe sage for small text (5.1:1) */
  --muted-soft:#6B6A64;  /* AA-safe muted (5.2:1) */
  --sage:#5F9E88;        /* SIGNATURE SAGE — the logo "o", success, calm. hopala's own note. */
  --sage-deep:#45806B;   /* sage for checks / verdicts */
  --sage-mist:#E9F0EA;   /* pale sage tint — icon tiles, success, CTA blocks */
  --kraft:#D4A27F;       /* kraft-paper tan — index numbers, steam, accents */
  --manilla:#EBDBBC;     /* manilla-folder tan — highlighter + ::selection */

  --serif:'Fredoka','Assistant',sans-serif;   /* headings + logo = brand face */
  --serif-alt:'David Libre','Frank Ruhl Libre',serif;
  --sans:'Assistant','Arial Hebrew','Segoe UI',sans-serif;  /* body */

  --ease:cubic-bezier(.22,1,.36,1);      /* standard easing */
  --spring:cubic-bezier(.3,1.25,.5,1);   /* overshoot spring — lifts, CTAs */
  --gutter:clamp(1.25rem,5vw,4rem);      /* the one horizontal rhythm unit */
  --header-h:62px;

  /* signature: hand-cut asymmetric card corners — irregular, but adult.
     Alternate a/b on adjacent cards so no two corners match. */
  --wob-a:1.1rem 1.5rem 1.15rem 1.6rem / 1.55rem 1.15rem 1.6rem 1.1rem;
  --wob-b:1.5rem 1.1rem 1.6rem 1.15rem / 1.1rem 1.6rem 1.15rem 1.55rem;
}

/* ---- base ------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:1.0625rem;      /* 17px */
  line-height:1.65;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}
/* faint paper grain — fixed fractal-noise overlay at 4.5% multiply.
   This texture is a big part of why the site reads "paper", not "web app". */
body::after{
  content:"";position:fixed;inset:0;z-index:90;pointer-events:none;
  opacity:.045;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--manilla);color:var(--ink)}
a{color:var(--clay-text);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}
a:hover{color:var(--ink)}
:focus-visible{outline:2.5px solid var(--clay-text);outline-offset:3px;border-radius:4px}
b,strong{font-weight:700}

/* ---- layout ----------------------------------------------- */
.wrap{max-inline-size:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{max-inline-size:880px}
section{padding-block:clamp(4rem,10vh,7rem);scroll-margin-block-start:4.5rem}
section + section{border-block-start:1px solid var(--hairline)}

/* ---- headings (brand face, tight tracking, balanced) ------- */
h1,h2,h3{font-family:var(--serif);letter-spacing:-.012em;text-wrap:balance}
h1{font-size:clamp(2.5rem,7vw,5.2rem);line-height:1.08;font-weight:700}
h2{font-size:clamp(1.9rem,4.2vw,2.9rem);line-height:1.18;font-weight:700}
h3{font-size:clamp(1.25rem,2.4vw,1.55rem);line-height:1.35;font-weight:700}

/* ---- marker highlighter (sweeps WITH the reading direction) --
   The 100deg angle is deliberate: in RTL it sweeps right-to-left.
   Use .marker for manilla, add .sage-mark for the sage variant.
   Reach for this instead of bold/color to emphasize a phrase. */
.marker{
  background-image:linear-gradient(100deg,transparent 2%,var(--manilla) 6%,var(--manilla) 92%,transparent 97%);
  background-repeat:no-repeat;background-size:100% 58%;background-position:100% 76%;
  padding-inline:.12em;
}
.marker.sage-mark{background-image:linear-gradient(100deg,transparent 2%,var(--sage-mist) 6%,var(--sage-mist) 92%,transparent 97%)}

/* ---- buttons (ink fill, coral on hover, spring lift) -------- */
.btn{
  display:inline-flex;align-items:center;gap:.55rem;
  text-decoration:none;font-weight:600;font-size:1.05rem;
  padding:.68rem 1.5rem;cursor:pointer;font-family:var(--sans);
  border-radius:14px 17px 14px 18px / 17px 14px 18px 14px;   /* hand-cut, not uniform */
  transition:transform .3s var(--spring),background .2s,color .2s;
}
.btn-primary{background:var(--ink);color:var(--paper);border:1.5px solid var(--ink)}
.btn-primary:hover{background:var(--clay-deep);border-color:var(--clay-deep);color:#fff;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--paper2);color:var(--ink);transform:translateY(-2px)}

/* ---- card (notepad fill, wobble border, hard-shadow lift) ---
   Alternate --wob-a / --wob-b on adjacent cards (see :nth-child). */
.card{
  background:var(--pad-bg);
  border:1.5px solid var(--line);
  border-radius:var(--wob-a);
  padding:1.4rem 1.3rem 1.3rem;
  transition:border-color .3s,transform .35s var(--spring),box-shadow .3s;
}
.card:nth-child(even){border-radius:var(--wob-b)}
.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:2px 4px 0 rgba(20,20,19,.08)}
/* organic blob for a leading index number / icon tile */
.blob{
  inline-size:44px;block-size:44px;display:grid;place-items:center;
  background:var(--sage-mist);border:2px solid var(--ink);
  border-radius:50% 46% 52% 48% / 48% 52% 46% 52%;
  font-family:var(--serif);font-weight:700;
}

/* ---- signature "sticker" shadow — HARD, zero blur.
   Never a soft Material drop shadow. Offset only. --------- */
.shadow-sticker{box-shadow:5px 7px 0 rgba(20,20,19,.09)}
.shadow-sticker-sm{box-shadow:3px 5px 0 rgba(20,20,19,.08)}

/* ---- form fields (hand-drawn underline, coral focus) ------- */
.field input,.field select,.field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:transparent;border:none;border-block-end:2px solid var(--ink);
  border-radius:3px 14px 3px 16px / 14px 3px 16px 3px;
  padding:.5rem .3rem;min-block-size:44px;
  transition:border-color .2s,background .2s;
}
.field textarea{
  border:1.5px solid var(--ink);
  border-radius:12px 16px 12px 18px / 16px 12px 18px 12px;
  min-block-size:110px;resize:vertical;padding:.7rem .8rem;background:rgba(250,249,245,.7);
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--clay-text);background:rgba(217,119,87,.06)}

/* ---- the live-text wordmark (site header ONLY; everywhere
   else embed the outlined SVGs from ./logo/). ----------------
   The raised sage "o" is the whole identity. It sits -.26em
   with NOTHING beneath it, at every size. The word is never
   all-green; the "o" is the only colored glyph. One hop on
   load, never infinite. */
.hopala-wm{
  font-family:'Fredoka',sans-serif;font-weight:540;letter-spacing:-.012em;
  color:#141413;direction:ltr;line-height:1.32;display:inline-block;text-decoration:none;
}
.hopala-wm .o{position:relative;top:-.26em;display:inline-block;color:#5F9E88}
.hopala-wm.compact .o{color:#3E7561;transform:scale(1.06);transform-origin:50% 50%}   /* <=24px on light */
.dark .hopala-wm,[data-theme="dark"] .hopala-wm{color:#FAF9F5}
.dark .hopala-wm .o,[data-theme="dark"] .hopala-wm .o{color:#5F9E88}
@keyframes hopala-hop{0%,46%,100%{transform:translateY(0)}58%{transform:translateY(-.11em)}68%{transform:translateY(.015em)}76%{transform:translateY(-.045em)}84%{transform:translateY(0)}}
.hopala-wm.animate .o{animation:hopala-hop 3.4s ease-in-out .6s 1}

/* ---- motion is a courtesy, not a default. Always honor this. */
@media (prefers-reduced-motion: reduce){
  .hopala-wm.animate .o{animation:none}
  *{scroll-behavior:auto !important}
}