/* Easydone Studio signature layer ("the studio wall"), DES-08, 26 Sep 2026.
   Same family as easydone.work (wordmark, Manrope, deep green #103d36, gold #eac51b),
   different character: an ivory paper canvas, green as ink, gold as highlighter,
   hand-placed cards and hands-on motion. Every class is prefixed sd- so it can sit
   beside any page's own CSS. Read STUDIO-IDENTITY.md for the rules. Light only. */

@font-face{font-family:"Manrope Local";src:url("/assets/site/fonts/manrope-latin.woff2") format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:Nunito;src:url("/assets/site/fonts/nunito-latin.woff2") format("woff2");font-weight:500 900;font-display:swap}

:root{
  /* Colour: ink, highlighter, paper */
  --sd-ink:#103d36;          /* deep green: type, outlines, frames */
  --sd-ink-2:#1e5a4f;        /* hover ink, secondary strokes */
  --sd-ink-soft:#4a5f59;     /* body copy on ivory (6.4:1) */
  --sd-ink-faint:#5f6f69;    /* captions, fine print (5.0:1 on ivory) */
  --sd-gold:#eac51b;         /* highlighter, tabs, buttons */
  --sd-gold-deep:#b8960c;    /* gold strokes on white */
  --sd-swash:rgba(234,197,27,.5);
  --sd-tape:rgba(234,197,27,.55);
  --sd-canvas:#fbf7ec;       /* the ivory page */
  --sd-paper:#fffdf7;        /* cards and screens sit on this */
  --sd-sage:#dde8dc;         /* quiet fills (plan swatch 3) */
  --sd-line:rgba(16,61,54,.16);
  --sd-line-soft:rgba(16,61,54,.09);
  --sd-grid-minor:rgba(16,61,54,.045);
  --sd-grid-major:rgba(16,61,54,.085);
  /* Shape and depth: printed, not glossy */
  --sd-radius:16px;
  --sd-radius-sm:10px;
  --sd-print:3px 4px 0 rgba(16,61,54,.13);
  --sd-print-lg:5px 7px 0 rgba(16,61,54,.12);
  --sd-lift:0 22px 40px -26px rgba(16,61,54,.45);
  /* Hand-placed tilt */
  --sd-tilt-a:-1.2deg;
  --sd-tilt-b:1deg;
  --sd-tilt-c:.6deg;
  /* Motion */
  --sd-ease:cubic-bezier(.2,.8,.2,1);
  --sd-settle:cubic-bezier(.34,1.36,.52,1);
  /* Type */
  --sd-font:"Manrope Local",Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sd-display:clamp(44px,6.1vw,90px);
  --sd-h2:clamp(32px,4.1vw,56px);
  --sd-h3:clamp(20px,1.7vw,24px);
  --sd-lead:clamp(18px,1.45vw,21px);
}

.sd-page{margin:0;background:var(--sd-canvas);color:var(--sd-ink);font:500 16px/1.6 var(--sd-font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sd-page *,.sd-page *::before,.sd-page *::after{box-sizing:border-box}
.sd-page h1,.sd-page h2,.sd-page h3{font-weight:800;color:var(--sd-ink);margin:0;text-wrap:balance}
.sd-page h1{font-size:var(--sd-display);line-height:.98;letter-spacing:-.045em}
.sd-page h2{font-size:var(--sd-h2);line-height:1.03;letter-spacing:-.038em}
.sd-page h3{font-size:var(--sd-h3);line-height:1.2;letter-spacing:-.02em}
.sd-page p{margin:0;color:var(--sd-ink-soft)}
.sd-lead{font-size:var(--sd-lead);line-height:1.45;font-weight:700;color:var(--sd-ink)!important;letter-spacing:-.01em}
.sd-page a{color:inherit}
.sd-page :focus-visible{outline:3px solid var(--sd-ink);outline-offset:3px;border-radius:6px}

/* Brand: the approved wordmark, then "Studio" in Nunito ExtraBold */
.sd-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.sd-brand img{width:128px;height:auto;display:block}
.sd-brand>span{font-family:Nunito,var(--sd-font);font-weight:800;font-size:22px;letter-spacing:-.04em;line-height:1;padding-top:3px;color:var(--sd-ink)}

/* Canvas: the cutting mat. Use behind showcases, never behind long reading text. */
.sd-mat{background-color:var(--sd-canvas);background-image:
  linear-gradient(var(--sd-grid-major) 1px,transparent 1px),
  linear-gradient(90deg,var(--sd-grid-major) 1px,transparent 1px),
  linear-gradient(var(--sd-grid-minor) 1px,transparent 1px),
  linear-gradient(90deg,var(--sd-grid-minor) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;background-position:-1px -1px}
.sd-mat-fade{-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}

/* Crop marks: printer's corner marks around a showcase. Needs position:relative. */
.sd-crop{position:relative}
.sd-crop::before{content:"";position:absolute;inset:-16px;pointer-events:none;--c:rgba(16,61,54,.38);background:
  linear-gradient(var(--c),var(--c)) left top/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left top/1.5px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) right top/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right top/1.5px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) left bottom/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1.5px 14px no-repeat,
  linear-gradient(var(--c),var(--c)) right bottom/14px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1.5px 14px no-repeat}

/* Highlighter swash: the live site's gold stroke under the accent line */
.sd-swash{position:relative;display:inline-block;font-style:normal;z-index:0}
.sd-swash::after{content:"";position:absolute;left:-.05em;right:-.07em;bottom:.02em;height:.34em;background:var(--sd-swash);border-radius:40% 48% 44% 36%/60% 50% 55% 45%;transform:rotate(-1.3deg);z-index:-1}

/* On a dark (deep green) surface the highlighter turns muddy: use a thin gold stroke instead. */
.sd-dark .sd-swash::after{background:var(--sd-gold);height:.09em;bottom:-.05em;border-radius:99px;transform:rotate(-.8deg)}

/* Index tab: the section label, like a sketchbook tab. <span class="sd-tab"><b>01</b>Label</span> */
.sd-tab{display:inline-flex;align-items:stretch;border-radius:7px;overflow:hidden;font:800 12px/1 var(--sd-font);letter-spacing:.12em;text-transform:uppercase;box-shadow:var(--sd-print);border:1.5px solid var(--sd-ink)}
.sd-tab>*{padding:8px 10px}
.sd-tab b{background:var(--sd-ink);color:var(--sd-canvas);font-weight:800;letter-spacing:.04em}
.sd-tab span{background:var(--sd-gold);color:var(--sd-ink)}

/* Plan tag: which plan includes a feature */
.sd-plan{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--sd-ink);border-radius:999px;padding:5px 11px;font:800 12px/1 var(--sd-font);letter-spacing:.02em;color:var(--sd-ink);background:var(--sd-paper);white-space:nowrap}
.sd-plan::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sd-gold);box-shadow:0 0 0 1.5px var(--sd-ink)}
.sd-plan.is-coming{border-style:dashed}
.sd-plan.is-coming::before{background:transparent}

/* Buttons: printed stickers that press down */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 20px;border-radius:999px;border:1.5px solid var(--sd-ink);background:var(--sd-gold);color:var(--sd-ink);font:800 15px/1.1 var(--sd-font);text-decoration:none;box-shadow:3px 3px 0 var(--sd-ink);cursor:pointer;transition:transform .16s var(--sd-ease),box-shadow .16s var(--sd-ease),background .16s;white-space:nowrap}
.sd-btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--sd-ink)}
.sd-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--sd-ink)}
.sd-btn--ghost{background:var(--sd-paper)}
.sd-btn--small{min-height:38px;padding:8px 14px;font-size:13px;box-shadow:2px 2px 0 var(--sd-ink)}
.sd-btn svg{width:18px;height:18px;flex:none}
.sd-link{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--sd-ink);text-decoration:none;background:linear-gradient(var(--sd-swash),var(--sd-swash)) left bottom/100% .38em no-repeat;padding:0 2px;transition:background-size .2s var(--sd-ease)}
.sd-link:hover{background-size:100% 100%}

/* Cards: pinned work on the wall, tilted a little, straightened when you reach for them */
.sd-card{position:relative;background:var(--sd-paper);border:1.5px solid var(--sd-line);border-radius:var(--sd-radius);box-shadow:var(--sd-print-lg);transition:transform .45s var(--sd-settle),box-shadow .3s var(--sd-ease)}
.sd-tilt-a{transform:rotate(var(--sd-tilt-a))}
.sd-tilt-b{transform:rotate(var(--sd-tilt-b))}
.sd-tilt-c{transform:rotate(var(--sd-tilt-c))}
.sd-card:hover,.sd-card:focus-within{transform:rotate(0) translateY(-3px);box-shadow:var(--sd-print-lg),var(--sd-lift)}
.sd-tape::before{content:"";position:absolute;top:-13px;left:50%;width:112px;height:26px;margin-left:-56px;background:var(--sd-tape);transform:rotate(-2.5deg);border-left:2px dotted rgba(255,255,255,.55);border-right:2px dotted rgba(255,255,255,.55);box-shadow:0 1px 0 rgba(16,61,54,.06);pointer-events:none}

/* Frames for staged screens and devices */
.sd-frame{background:#fff;border:1.5px solid var(--sd-ink);border-radius:var(--sd-radius-sm);box-shadow:var(--sd-print);overflow:hidden}
.sd-phone{position:relative;border-radius:34px;background:var(--sd-ink);padding:8px;box-shadow:var(--sd-print-lg)}
.sd-phone>.sd-phone-screen{position:relative;border-radius:27px;overflow:hidden;background:#0b2420;aspect-ratio:9/16}
.sd-phone::after{content:"";position:absolute;top:15px;left:50%;width:30%;height:5px;margin-left:-15%;border-radius:4px;background:rgba(0,0,0,.45);z-index:3}
.sd-ai-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:rgba(11,36,32,.72);color:#fff;font:700 11px/1 var(--sd-font);letter-spacing:.01em}

/* Plan swatches: paint chips that deepen as the plans build on each other */
.sd-swatch{position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--sd-paper);border:1.5px solid var(--sd-ink);box-shadow:var(--sd-print);text-decoration:none;color:var(--sd-ink)}
.sd-swatch-chip{position:relative;padding:22px 20px 20px;min-height:150px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1.5px solid var(--sd-ink)}
.sd-swatch-chip::after{content:"";position:absolute;top:14px;right:14px;width:14px;height:14px;border-radius:50%;background:var(--sd-canvas);box-shadow:inset 0 0 0 1.5px var(--sd-ink)}
.sd-swatch[data-shade="1"] .sd-swatch-chip{background:#f6efd9}
.sd-swatch[data-shade="2"] .sd-swatch-chip{background:#f6e08a}
.sd-swatch[data-shade="3"] .sd-swatch-chip{background:#bcd5c4}
.sd-swatch[data-shade="4"] .sd-swatch-chip{background:var(--sd-ink);color:var(--sd-canvas)}
.sd-swatch[data-shade="4"] .sd-swatch-chip *{color:var(--sd-canvas)}

.sd-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (max-width:760px){
  :root{--sd-tilt-a:-.6deg;--sd-tilt-b:.5deg;--sd-tilt-c:.3deg}
  .sd-mat{background-size:96px 96px,96px 96px,24px 24px,24px 24px}
  .sd-brand img{width:108px}.sd-brand>span{font-size:19px}
}
@media (prefers-reduced-motion:reduce){
  .sd-page *,.sd-page *::before,.sd-page *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .sd-card:hover,.sd-card:focus-within{transform:none}
  .sd-card.sd-tilt-a{transform:rotate(var(--sd-tilt-a))}.sd-card.sd-tilt-b{transform:rotate(var(--sd-tilt-b))}.sd-card.sd-tilt-c{transform:rotate(var(--sd-tilt-c))}
  .sd-btn:hover,.sd-btn:active{transform:none}
}