/* perryidyll.com — design tokens, fonts, base.  Light only, on purpose: the page is 80% white space. */
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(/fonts/fraunces-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-normal.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-italic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  /* paper and ink */
  --paper:#FFFFFF; --wash:#FAFAF8; --ink:#141412; --ink-2:#2F2E2B; --muted:#6E6B64; --faint:#A9A59D; --line:#E8E6E1; --line-2:#F2F1ED;
  /* one light: warm gold, only ever at low alpha (use rgb(var(--light) / .12)) */
  --light:201 169 97;
  /* the three practices: desaturated, used for rings, ticks and hairlines only */
  --mind:#5C6A8A; --move:#5E6E4D; --strength:#8A5A47;
  /* the living values, written by breath.js every frame */
  --breath:.5; --mx:50vw; --my:35vh;
  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs--1:clamp(12.5px,.74rem + .15vw,13.5px); --fs-0:clamp(16px,.95rem + .25vw,18px); --fs-1:clamp(19px,1.05rem + .5vw,23px);
  --fs-2:clamp(24px,1.2rem + 1.2vw,34px); --fs-3:clamp(32px,1.4rem + 2.6vw,56px); --fs-4:clamp(42px,1.5rem + 5vw,96px);
  --lh-body:1.55; --measure:60ch;
  /* motion: two speeds for UI, one for heroes, one for breath. Never linear, never ease-in. */
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --ease-sheet:cubic-bezier(.32,.72,0,1); --ease-breath:cubic-bezier(.37,0,.63,1);
  --t-ack:160ms; --t-ui:240ms; --t-sheet:480ms; --t-hero:800ms;
  /* space */
  --gutter:clamp(20px,5vw,72px); --max:1240px; --radius:14px; --radius-s:8px;
  /* breathing derivatives: anything ambient reads these, nothing else owns a timer */
  --w-display:calc(330 + var(--breath) * 70);          /* headline weight 330→400 */
  --soft:calc(var(--breath) * 40);                     /* Fraunces SOFT axis 0→40 */
  --glow:calc(.06 + var(--breath) * .08);              /* light alpha .06→.14 */
  --lift:calc(var(--breath) * -2px);                   /* a 2px rise on the inhale */
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);font-size:var(--fs-0);line-height:var(--lh-body);font-variation-settings:"opsz" 14,"SOFT" 0,"WONK" 0;font-optical-sizing:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip;min-height:100svh}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding-left:1.2em}
::selection{background:rgb(var(--light) / .28);color:var(--ink)}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:4px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type roles */
.display{font-family:var(--serif);font-weight:340;letter-spacing:-.025em;line-height:.98;font-variation-settings:"opsz" 144,"SOFT" var(--soft),"WONK" 1,"wght" var(--w-display)}
.display em,.h em{font-style:italic;font-weight:300}
.h{font-family:var(--serif);font-weight:380;letter-spacing:-.018em;line-height:1.08;font-variation-settings:"opsz" 96,"SOFT" 20,"WONK" 1}
.h-2{font-size:var(--fs-2)}.h-3{font-size:var(--fs-3)}
.ui{font-family:var(--sans);font-variation-settings:"opsz" 14;letter-spacing:-.005em}
.eyebrow{font-family:var(--sans);font-size:var(--fs--1);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.lede{font-size:var(--fs-1);line-height:1.45;color:var(--ink-2);font-variation-settings:"opsz" 20,"SOFT" 10,"WONK" 0;max-width:var(--measure)}
.muted{color:var(--muted)}.faint{color:var(--faint)}
.num{font-variant-numeric:tabular-nums lining-nums}
.measure{max-width:var(--measure)}

/* layout */
.wrap{width:min(100% - var(--gutter)*2,var(--max));margin-inline:auto}
.hairline{border:0;border-top:1px solid var(--line);margin:0}

/* buttons: one primary, one quiet. Press feedback on everything. */
.btn{position:relative;display:inline-flex;align-items:center;gap:.6em;padding:.95em 1.5em;border-radius:999px;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:-.005em;line-height:1;white-space:nowrap;overflow:hidden;isolation:isolate;transition:transform var(--t-ack) var(--ease-out),background var(--t-ui) var(--ease-out),color var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out);will-change:transform}
.btn:active{transform:scale(.97)}
.btn-ink{background:var(--ink);color:var(--paper);box-shadow:0 0 0 0 rgb(var(--light) / 0),0 10px 30px -14px rgb(20 20 18 / .5)}
.fine .btn-ink:hover{box-shadow:0 0 0 6px rgb(var(--light) / var(--glow)),0 14px 34px -14px rgb(20 20 18 / .6)}
.btn-quiet{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.fine .btn-quiet:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.btn .ink{position:absolute;left:var(--x);top:var(--y);width:12px;height:12px;margin:-6px;border-radius:50%;background:currentColor;opacity:.28;pointer-events:none;transform:scale(0);animation:ink 520ms var(--ease-expo) forwards;z-index:-1}
@keyframes ink{to{transform:scale(40);opacity:0}}
.btn .arrow{display:inline-block;transition:transform var(--t-ui) var(--ease-out)}
.fine .btn:hover .arrow{transform:translateX(3px)}

/* the ring: one object that is logo, progress, breath and mark */
.ring{display:block}
.ring circle{fill:none;stroke:currentColor;stroke-width:1.25;vector-effect:non-scaling-stroke}
.ring .track{stroke:var(--line)}
.ring .fill{stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));transition:stroke-dashoffset 900ms var(--ease-expo)}

/* arrivals: [data-reveal] enters when breath.js marks it .in. --i staggers siblings. */
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity 700ms var(--ease-out),transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 70ms);will-change:opacity,transform}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="scale"]{transform:scale(.96)}
/* clip reveals clip the children, never the observed element: a fully clipped element never "intersects" */
[data-reveal="clip"]{opacity:1;transform:none}
[data-reveal="clip"]>img,[data-reveal="clip"]>.clip{clip-path:inset(0 0 100% 0);transition:clip-path 1000ms var(--ease-out);transition-delay:calc(var(--i,0) * 120ms)}
[data-reveal="clip"].in>img,[data-reveal="clip"].in>.clip{clip-path:inset(0 0 0 0)}
[data-reveal="clip"]>img{scale:1.06;transition:clip-path 1000ms var(--ease-out),scale 1300ms var(--ease-out);transition-delay:calc(var(--i,0) * 120ms)}
[data-reveal="clip"].in>img{scale:1}
/* masked line reveal: .mask > .line  (set by Breath.lines) */
.mask{overflow:hidden;display:block}
.mask .line{display:block;transform:translateY(112%);transition:transform 900ms var(--ease-out);transition-delay:calc(var(--i,0) * 90ms)}
.in .mask .line,.mask.in .line{transform:none}

/* the lamp: a warm light that follows the pointer (or breathes on touch) */
.lamp{position:fixed;inset:0;pointer-events:none;z-index:0;background:radial-gradient(640px circle at var(--mx) var(--my),rgb(var(--light) / var(--glow)),transparent 62%);opacity:0;transition:opacity 1200ms var(--ease-out)}
.lamp.on{opacity:1}

/* reduced motion: every state already final. The page loses nothing. */
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  :root{--breath:.5}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal],.mask .line,[data-reveal="clip"]>img,[data-reveal="clip"]>.clip{opacity:1;transform:none;clip-path:none;scale:1}
  .lamp{opacity:1;background:radial-gradient(640px circle at 50% 30%,rgb(var(--light) / .08),transparent 62%)}
}

/* word masks produced by Breath.lines: inline, with room for descenders and italics */
.mask.w{display:inline-block;vertical-align:top;padding:0 .05em .14em 0;margin:0 -.05em -.14em 0}
.mask.w .line{display:inline-block}