/* REMA 2026 — "I'm attending" card studio.
   Tokens and primitives follow the landing page (assets/css/style.css). */

@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Nohemi'; src:url('../assets/fonts/Nohemi-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'DM Sans'; src:url('../assets/fonts/DMSans-Variable.woff2') format('woff2-variations'); font-weight:100 1000; font-display:swap; }

:root{
  --ink:#03211E; --ink-2:#07211E; --ink-3:#11302D; --ink-4:#0C3531;
  --forest:#017242; --grass:#00A85A; --lime:#C1F16D;
  --paper-2:#FAFEF5; --line:#E0E5DB; --muted:#5E6664; --muted-3:#5B9890;
  --display:'Nohemi','Arial Narrow',sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gutter:clamp(16px,5vw,64px);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; color:#fff; font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background:var(--ink);
  min-height:100vh; display:flex; flex-direction:column;
}
img,svg,canvas{ display:block; max-width:100%; }
h2{ margin:0; }

/* Fixed backdrop carrying the main site's dot grid. A fixed layer rather than
   background-attachment, which iOS Safari ignores. */
.backdrop{
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  /* the main site's dot grid, exactly (assets/css/style.css: --dot-grid / --dot-size / --dot-pos) */
  background:radial-gradient(circle, #0B322D .6px, transparent 1.15px) -3px -4px / 33px 33px;
}

button,input,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; padding:0; }
a{ color:inherit; text-decoration:none; }
h1,p,fieldset{ margin:0; }
fieldset{ border:0; padding:0; min-width:0; }
legend{ padding:0; }
[hidden]{ display:none !important; }
:focus-visible{ outline:3px solid var(--grass); outline-offset:3px; }
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

.wrap{ width:100%; max-width:calc(1240px + var(--gutter)*2); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Buttons (square, as on the site) ---- */
.btn{
  --bg:var(--grass); --fg:#fff; --bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.9rem 1.7rem; min-height:52px;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  font-weight:600; font-size:.9375rem; line-height:1;
  transition:transform .25s var(--ease-out), background-color .2s, color .2s, border-color .2s;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); transition-duration:.08s; }
.btn--lime{ --bg:var(--lime); --fg:var(--ink-3); }
.btn--lime:hover{ --bg:#b4ea54; }
.btn--ghost{ --bg:transparent; --fg:var(--ink-3); --bd:rgba(17,48,45,.35); }
.btn--ghost:hover{ --bg:var(--ink-3); --fg:#fff; --bd:var(--ink-3); }
.btn--slim{ padding-block:.55rem; min-height:40px; padding-inline:1.1rem; }
.btn--ink{ --bg:var(--ink-3); --fg:var(--lime); }
.btn--ink:hover{ --bg:var(--ink); }
.btn[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; transform:none; }

.link{ font-size:.875rem; font-weight:600; color:var(--forest); text-decoration:underline; text-underline-offset:3px; }
.link:hover{ color:var(--ink-3); }

/* ---- Header ---- */
.bar{ border-bottom:1px solid #1E4A43; background:rgba(3,33,30,.86); backdrop-filter:blur(8px); position:sticky; top:0; z-index:5; }
.bar__inner{ display:flex; align-items:center; justify-content:space-between; height:70px; }
.bar__logo img{ height:32px; width:auto; }

/* ---- Studio ---- */
/* Two columns on wide screens: the card holds still on the left while the steps
   run down the right, so every change is seen as it's made. One column below 900px:
   heading, card, then the steps. */
.studio{
  flex:1; display:grid; column-gap:clamp(40px,6vw,96px); row-gap:32px; align-items:start;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"preview intro" "preview panel"; grid-template-rows:auto 1fr;
  padding-block:clamp(32px,5vw,64px) clamp(48px,7vw,96px);
}
.studio__intro{ grid-area:intro; }
.studio__preview{ grid-area:preview; position:sticky; top:94px; }
.studio__panel{ grid-area:panel; }

/* sized so the whole card and its hint fit on screen under the header */
.frame{ position:relative; width:min(100%, 560px, calc((100dvh - 200px) * 1080 / 1350)); margin-inline:auto; }
.frame canvas{
  width:100%; height:auto; aspect-ratio:1080/1350;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px #1E4A43;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.frame.is-over canvas{ cursor:grab; }
.frame.is-pick canvas{ cursor:pointer; }
.frame.is-dragging canvas{ cursor:grabbing; }
.frame__tools{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 14px; margin-top:16px; }
.frame__hint{ font-size:.875rem; color:#8FBDB6; }

.title{
  font-family:var(--display); font-weight:700; letter-spacing:.02em; line-height:1.06;
  font-size:clamp(2.2rem,4.2vw,3.5rem); text-wrap:balance;
}
.lede{ margin-top:16px; color:rgba(255,255,255,.72); max-width:34em; }

/* ---- Steps panel ---- */
.steps{ container-type:inline-size; display:grid; gap:40px; padding:clamp(24px,3.4vw,40px); background:var(--paper-2); color:var(--ink-3); }

.drop{
  display:flex; align-items:center; gap:16px; padding:20px;
  border:1.5px dashed rgba(17,48,45,.3); background:#fff; cursor:pointer;
  transition:border-color .2s, background-color .2s;
}
.drop:hover, .drop.is-over{ border-color:var(--grass); background:#F5FFE7; }
.drop:has(input:focus-visible){ outline:3px solid var(--grass); outline-offset:3px; }
.drop__icon{ flex:none; display:grid; place-items:center; width:48px; height:48px; background:var(--ink-3); color:var(--lime); }
.drop__text{ display:grid; gap:2px; min-width:0; }
.drop__text strong{ font-weight:600; }
.drop__text span{ font-size:.875rem; color:var(--muted); overflow-wrap:anywhere; }

.error{ margin-top:10px; font-size:.875rem; color:#B42318; }

.photo{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:12px; background:#fff; border:1px solid #CBD3C5; }
.photo__thumb{ width:64px; height:64px; border-radius:50%; flex:none; box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--ink-3); }
.photo__meta{ flex:1 1 0; min-width:0; display:grid; gap:2px; }
.photo__meta strong{ font-weight:600; }
.photo__links{ display:flex; flex-wrap:wrap; gap:2px 14px; }
.photo__links .link{ cursor:pointer; }
.photo .btn{ flex:none; }
/* narrow form (phones): Adjust gets its own full-width line under the thumbnail */
@container (max-width:440px){ .photo .btn{ flex:1 1 100%; } }
/* once a photo is in, the drop zone shrinks to the row above */
.drop.is-hidden{ display:none; }

/* Quick start: LinkedIn fills the photo and the name in one go, so it leads the
   form; the two steps below are the way to do it by hand. Gone once a photo is in. */
.quick{ display:grid; }
.quick__btn{ width:100%; gap:10px; padding-inline:1rem; --bg:#0A66C2; --fg:#fff; }
.quick__btn:hover{ --bg:#08529C; }
.quick__btn svg{ flex:none; }
@container (max-width:340px){ .quick__btn{ font-size:.875rem; white-space:nowrap; } }
.quick .note{ margin-top:10px; }
.quick__or{ display:flex; align-items:center; gap:14px; margin-top:28px; font-size:.8125rem; color:var(--muted); }
.quick__or::before, .quick__or::after{ content:''; flex:1; height:1px; background:#D5DDCF; }

/* ---- Adjust photo dialog ---- */
.editor{
  width:min(480px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:24px;
  border:0; background:var(--paper-2); color:var(--ink-3);
  box-shadow:0 30px 90px -20px rgba(0,0,0,.6);
}
.editor::backdrop{ background:rgba(3,33,30,.78); backdrop-filter:blur(3px); }
.editor[open]{ animation:editor-in .28s var(--ease-out); }
@keyframes editor-in{ from{ opacity:0; transform:translateY(12px) scale(.98); } }
.editor__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.editor__head h2{ font-family:var(--display); font-weight:600; font-size:1.5rem; letter-spacing:.02em; line-height:1.2; }
.editor__x{ display:grid; place-items:center; width:40px; height:40px; color:var(--ink-3); }
.editor__x:hover{ background:#E8EEE2; }
.editor__help{ margin-top:4px; font-size:.875rem; color:var(--muted); }
.editor__canvas{
  width:100%; height:auto; aspect-ratio:1; margin-top:16px; background:var(--ink);
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.editor__canvas:active{ cursor:grabbing; }
.editor__zoom{ display:flex; align-items:center; gap:10px; margin-top:16px; }
.editor__zoom input{ flex:1; min-width:0; accent-color:var(--forest); }
.editor__step{ display:grid; place-items:center; width:40px; height:40px; border:1px solid #CBD3C5; background:#fff; color:var(--ink-3); }
.editor__step:hover{ border-color:var(--ink-3); }
.editor__actions{ display:flex; gap:12px; margin-top:20px; }
.editor__actions .btn{ flex:1; }

.field{ display:grid; gap:8px; }
.field + .field{ margin-top:24px; }
.field label{ font-size:.875rem; font-weight:600; line-height:1.25; }
.opt{ font-weight:400; color:var(--muted); }
.field input{
  width:100%; min-height:52px; padding:.8rem 1rem; background:#fff;
  border:1px solid #CBD3C5; color:var(--ink-3); font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
}
.field input::placeholder{ color:#6B746E; }
.field input:focus{ outline:none; border-color:var(--grass); box-shadow:0 0 0 3px rgba(0,168,90,.18); }

.actions{ display:flex; flex-wrap:wrap; gap:12px; }
.actions .btn{ flex:1 1 200px; }
.note{ margin-top:12px; font-size:.875rem; line-height:1.3; color:var(--muted); }
.note.is-ok{ color:var(--forest); }

/* Share on LinkedIn / X / Instagram */
.social{ margin-top:24px; }
.social__label{ margin-bottom:8px; font-size:.875rem; font-weight:600; line-height:1.25; }
.social__row{ display:flex; flex-wrap:wrap; gap:10px; }
.social__row .btn{ flex:1 1 auto; gap:8px; padding-inline:.75rem; white-space:nowrap; }
.social__row svg{ flex:none; }
/* narrow form (phones): one full-width button per network */
@container (max-width:380px){ .social__row .btn{ flex:1 1 100%; } }

.caption{ margin-top:40px; }
.caption__head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; line-height:1.25; }
.caption__head label{ font-size:.875rem; font-weight:600; line-height:1.25; }
.caption textarea{
  width:100%; resize:vertical; padding:.8rem 1rem; background:#fff; border:1px solid #CBD3C5;
  font-size:.9375rem; line-height:1.5; color:var(--ink-3);
}

.privacy{ margin-top:16px; font-size:.8125rem; line-height:1.4; color:var(--muted); padding-left:20px; position:relative; }
.privacy::before{ content:''; position:absolute; left:0; top:.4em; width:8px; height:8px; border-radius:50%; background:var(--grass); }



/* Footer: the theme, set big, standing on the main site's single-colour motif band
   (assets/img/patterns/line-ink.svg, as behind its closing section). The band is the
   last thing on the page: it fades in from the top and sits flush on the bottom edge,
   one whole tile tall at desktop widths, so there is no cut line. Each headline line
   rises out of its own ground line when the footer scrolls into view. */
.foot{ position:relative; text-align:center; color:#fff; }
.foot__inner{ position:relative; z-index:1; display:grid; justify-items:center; padding-top:clamp(72px,11vw,160px); }
.foot__t{
  margin:0; display:grid; justify-items:center;
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(2.5rem,7vw,6.5rem); line-height:.92; letter-spacing:.01em;
}
.foot__line{ display:block; overflow:hidden; padding-bottom:.06em; }
.foot__line > span{ display:block; }
.foot__line--lime{ color:var(--lime); }
.foot__s{ margin-top:clamp(18px,2.4vw,28px); max-width:36ch; text-wrap:balance; font-family:var(--display); font-weight:600; font-size:clamp(1.125rem,1.9vw,1.6rem); line-height:1.3; color:rgba(255,255,255,.88); }
.foot__cta{ margin-top:clamp(24px,3vw,36px); min-height:56px; padding-inline:2rem; font-size:1rem; }
/* rise from the ground: only once the script has armed it, so text never hides without JS */
.can-rise .foot__line > span{ transform:translateY(105%); transition:transform 1s var(--ease-out); }
.can-rise .foot__line--lime > span{ transition-delay:.14s; }
.can-rise .foot.is-in .foot__line > span{ transform:none; }
.pattern-band{
  /* clear ground between the Register button and the first row of motifs */
  height:clamp(200px,30vw,420px); margin-top:clamp(40px,6vw,88px);
  background:url('../assets/img/patterns/line-ink.svg') left bottom/11.1111% auto repeat-x;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 45%,#000 85%);
          mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 45%,#000 85%);
  pointer-events:none;
}

@media (max-width:900px){
  .studio{ grid-template-columns:1fr; grid-template-areas:"intro" "preview" "panel"; row-gap:28px; }
  .studio__preview{ position:static; }
  /* a little under full width, so the first step shows on a phone's first screen */
  .frame{ width:min(80%, 420px); }
}
@media (prefers-reduced-motion:reduce){ .btn{ transition:none; } .editor[open]{ animation:none; } }