/* =========================================================
   Retriever Labs — studio.css
   Styles specific to the studio homepage (index.html).
   Shared tokens, top bar, background and .reveal live in base.css.
   ========================================================= */

/* ---- The letterhead sheet ---- */
.sheet{
  max-width:420px;margin:0 auto;background:var(--paper);
  position:relative;z-index:1;color:var(--ink);
  padding:40px 34px 0;
  box-shadow:0 4px 10px rgba(80,60,30,0.15),0 30px 70px rgba(80,60,30,0.25);
  font-family:var(--mono);
  transform-origin:top center;
  animation:printIn 1100ms cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes printIn{0%{opacity:0;transform:translateY(-40px) scaleY(0.5);filter:blur(2px);}55%{opacity:1;filter:blur(0);}100%{opacity:1;transform:none;}}
.sheet::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.5 0 0 0 0 0.4 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.sheet-top{position:absolute;top:-1px;left:0;right:0;height:9px;background:radial-gradient(circle at 8px -4px,transparent 6px,var(--paper) 6px) repeat-x;background-size:16px 9px;z-index:2;}
.sheet-bottom{position:relative;height:18px;margin:0 -34px;background:var(--paper);-webkit-mask:radial-gradient(circle at 9px 18px,transparent 8px,#000 8px) repeat-x;mask:radial-gradient(circle at 9px 18px,transparent 8px,#000 8px) repeat-x;-webkit-mask-size:18px 18px;mask-size:18px 18px;}

/* ---- Letterhead masthead ---- */
.lh{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;padding-bottom:22px;border-bottom:2px solid var(--ink);}
.lh-brand{display:flex;align-items:center;gap:14px;}
.lh-logo{height:54px;width:auto;display:block;flex-shrink:0;}
.lh-name{font-family:var(--font-display);font-size:23px;font-weight:700;letter-spacing:-0.5px;line-height:1;color:var(--ink);}
.lh-sub{font-size:9.5px;color:var(--ink-3);letter-spacing:0.14em;text-transform:uppercase;margin-top:5px;}
.lh-meta{text-align:right;font-size:9.5px;color:var(--ink-3);letter-spacing:0.06em;line-height:1.7;}

/* ---- Corner stamp ---- */
.stamp-corner{position:absolute;top:128px;right:30px;z-index:3;border:2.5px solid var(--stamp-ok);color:var(--stamp-ok);font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;padding:7px 11px;border-radius:5px;transform:rotate(8deg);background:rgba(46,125,70,0.05);line-height:1.3;text-align:center;opacity:0;animation:stampIn 600ms cubic-bezier(0.34,1.56,0.64,1) 900ms both;}
@keyframes stampIn{from{opacity:0;transform:rotate(8deg) scale(1.5);}to{opacity:0.9;transform:rotate(8deg) scale(1);}}

/* ---- Manifesto ---- */
.block{position:relative;z-index:1;padding:30px 0;border-bottom:1.5px dashed var(--dash);}
.block:last-of-type{border-bottom:none;}
.eyebrow{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px;}
.headline{font-family:var(--font-display);font-size:27px;font-weight:600;line-height:1.18;letter-spacing:-0.6px;color:var(--ink);}
.headline .hl{color:var(--amber-deep);}
.para{font-family:var(--font-body);font-size:14px;line-height:1.75;color:var(--ink-2);margin-top:16px;}

/* ---- Principles ---- */
.principle{display:flex;gap:14px;align-items:flex-start;padding:15px 0;}
.principle:first-of-type{padding-top:4px;}
.p-ic{width:38px;height:38px;border:1.5px solid var(--ink);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.p-ic .ic{width:20px;height:20px;stroke:var(--ink);}
.p-body{flex:1;}
.p-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);}
.p-desc{font-family:var(--font-body);font-size:12.5px;line-height:1.6;color:var(--ink-2);margin-top:3px;}
.principle.reveal:nth-of-type(1){transition-delay:0ms;}
.principle.reveal:nth-of-type(2){transition-delay:90ms;}
.principle.reveal:nth-of-type(3){transition-delay:180ms;}

/* ---- Product card (Kepto) ---- */
.product{position:relative;z-index:1;background:#FFFDF7;border:1.5px solid var(--paper-edge);border-radius:8px;padding:24px;margin-top:6px;}
.product-head{display:flex;align-items:center;gap:14px;}
.product-mark{width:50px;height:50px;border-radius:12px;background:var(--amber);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 4px 12px rgba(224,169,46,0.3);}
.product-mark .ic{width:28px;height:28px;stroke:var(--ink);stroke-width:2.2;}
.product-name{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-0.4px;color:var(--ink);}
.product-tag{font-size:11px;color:var(--ink-3);margin-top:3px;letter-spacing:0.04em;}
.product-desc{font-family:var(--font-body);font-size:13px;line-height:1.7;color:var(--ink-2);margin:16px 0;}
.product-status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--stamp-warn);border:2px solid var(--stamp-warn);background:rgba(193,122,18,0.07);padding:4px 10px;border-radius:4px;transform:rotate(-2deg);margin-bottom:16px;}
.product-status .ic{width:12px;height:12px;stroke:var(--stamp-warn);}

/* ---- Buttons ---- */
.product-btns{display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;gap:9px;border:none;border-radius:10px;padding:13px 20px;cursor:pointer;text-decoration:none;font-family:var(--font-body);font-weight:600;font-size:14px;transition:transform 150ms,box-shadow 150ms;}
.btn:active{transform:scale(0.97);}
.btn-dark{background:var(--ink);color:var(--paper);box-shadow:0 6px 18px rgba(0,0,0,0.25);}
.btn-dark:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,0.35);}
.btn-dark .apple{width:22px;height:22px;fill:var(--paper);stroke:none;}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:var(--paper);}
.btn-ghost .ic{width:16px;height:16px;}
.btn-dark .b-small{font-size:8.5px;letter-spacing:0.06em;opacity:0.8;display:block;line-height:1;}
.btn-dark .b-big{font-family:var(--font-display);font-size:15px;font-weight:600;line-height:1.15;}

/* ---- Divider label ---- */
.div-label{position:relative;z-index:1;text-align:center;font-size:10px;letter-spacing:0.2em;color:var(--ink-3);text-transform:uppercase;margin:30px 0 6px;}
.div-label span{background:var(--paper);padding:0 12px;position:relative;}
.div-label::before{content:'';position:absolute;left:0;right:0;top:50%;border-top:1.5px dashed var(--dash);z-index:-1;}

/* ---- Contact + footer ---- */
.contact{position:relative;z-index:1;padding:26px 0 4px;text-align:center;}
.contact-h{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink);}
.contact-mail{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:14px;color:var(--ink);border-bottom:1.5px dashed var(--ink-3);padding-bottom:2px;text-decoration:none;}
.contact-mail:hover{border-bottom-style:solid;}
.barcode{margin:26px 0 6px;height:44px;position:relative;z-index:1;background:repeating-linear-gradient(90deg,var(--ink) 0,var(--ink) 1px,transparent 1px,transparent 3px),repeating-linear-gradient(90deg,var(--ink) 0,var(--ink) 2px,transparent 2px,transparent 6px),repeating-linear-gradient(90deg,var(--ink) 0,var(--ink) 1px,transparent 1px,transparent 4px);background-size:5px 100%,11px 100%,7px 100%;}
.barcode-num{text-align:center;font-size:11px;letter-spacing:0.3em;color:var(--ink-2);margin-top:8px;position:relative;z-index:1;}
.foot{text-align:center;font-size:10px;color:var(--ink-3);margin:18px 0 6px;letter-spacing:0.08em;position:relative;z-index:1;text-transform:uppercase;}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce){.sheet,.stamp-corner{animation:none;}}

/* ---- Desktop: widen the sheet ---- */
@media(min-width:760px){
  .sheet{max-width:600px;padding:52px 50px 0;}
  .sheet-bottom{margin:0 -50px;}
  .headline{font-size:34px;}
  .stamp-corner{top:140px;right:44px;}
}