/* Marju Studio — the signed-in design system (option 2, Oct 2026).
   One file for the studio, Your photos, Account and Sign in. Tokens first,
   then components. Square corners, 48px controls, Inter Tight, black and white.
   Pages add layout only; colours, type and controls live here. */

@font-face{
  font-family:"Inter Tight";
  src:url("/fonts/inter-tight-latin-var.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
}
:root{
  --ink:#111111; --text:#111111; --muted:#62625F;
  --page:#FFFFFF; --surface:#F7F7F5; --rule:#E3E3E0;
  --hover:#F0F0ED; --pressed:#E8E8E4; --dis-bg:#E3E3E0; --dis-text:#62625F;
  --p-hover:#292929; --p-pressed:#000000;
  --err:#A32929; --err-bg:#FFF4F2; --ok:#245A3C; --ok-bg:#F1F7F2;
  --sans:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --max:1200px; --gut:32px; --side:320px;
  /* older names, so any page still using them gets the new values */
  --soft:#62625F; --faint:#62625F; --bone:#F7F7F5; --shell:#FFFFFF; --line:#E3E3E0; --accent:#111111; --accent-soft:#F7F7F5;
  --t:140ms;
}
@media (max-width:767px){:root{--gut:16px}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;background:var(--page);color:var(--text);font:400 16px/24px var(--sans);
  -webkit-font-smoothing:antialiased;letter-spacing:-.003em}
img{max-width:100%}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 3px #fff}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---------- type ---------- */
.h-page{font:600 40px/44px var(--sans);letter-spacing:-.035em;color:var(--ink);margin:0}
.h-sec{font:600 24px/30px var(--sans);letter-spacing:-.025em;color:var(--ink);margin:0}
.h-sub{font:600 18px/24px var(--sans);letter-spacing:-.015em;color:var(--ink);margin:0}
.lede{font:400 16px/24px var(--sans);color:var(--muted);margin:8px 0 0}
.meta{font:400 14px/20px var(--sans);color:var(--muted);margin:0}
.eyebrow{font:600 12px/16px var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin:0}
.lbl{display:block;font:600 16px/20px var(--sans);color:var(--ink);margin:0 0 8px}
.muted{color:var(--muted)}
@media (max-width:767px){.h-page{font-size:28px;line-height:32px}.h-sec{font-size:22px;line-height:28px}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:12px 24px;
  border:1px solid var(--ink);border-radius:0;background:var(--ink);color:#fff;font:600 16px/20px var(--sans);
  text-decoration:none;cursor:pointer;transition:background var(--t),color var(--t),border-color var(--t);white-space:nowrap}
.btn:hover:not(:disabled){background:var(--p-hover);border-color:var(--p-hover)}
.btn:active:not(:disabled){background:var(--p-pressed)}
.btn:disabled,.btn[aria-disabled=true]{background:var(--dis-bg);border-color:var(--dis-bg);color:var(--dis-text);cursor:not-allowed}
.btn.sec{background:#fff;color:var(--ink);border-color:var(--ink)}
.btn.sec:hover:not(:disabled){background:var(--hover);border-color:var(--ink)}
.btn.sec:active:not(:disabled){background:var(--pressed)}
.btn.sec:disabled{background:#fff;border-color:var(--rule);color:var(--dis-text)}
.btn.wide{width:100%}
.btn.split{justify-content:space-between}
.btn .arr{font-weight:400}
.btn svg{flex:none}
/* a text link that still has a 44px target */
.tlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:var(--ink);
  font:400 16px/20px var(--sans);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
.tlink.sm{font-size:14px}
.tlink:hover{text-decoration-thickness:2px}
.tlink:disabled{color:var(--dis-text);text-decoration:none;cursor:default}
.ibtn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid transparent;
  background:none;color:var(--ink);cursor:pointer;border-radius:0;padding:0}
.ibtn:hover{background:var(--hover)}
.ibtn.box{border-color:var(--rule)}

/* ---------- fields ---------- */
.field{margin:0 0 24px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=number],select,textarea{
  width:100%;min-height:48px;padding:12px 14px;border:1px solid #C9C9C5;border-radius:0;background:#fff;color:var(--ink);
  font:400 16px/22px var(--sans)}
textarea{min-height:120px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.field-err{color:var(--err);font-size:14px;line-height:20px;margin:8px 0 0}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--err)}

/* choice tiles: a radio or checkbox that is the whole box (48px) */
.choices{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 16px;
  border:1px solid var(--rule);background:#fff;color:var(--ink);font:400 16px/20px var(--sans);cursor:pointer;
  transition:border-color var(--t),background var(--t)}
.choice:hover{background:var(--hover)}
.choice input{position:absolute;opacity:0;width:1px;height:1px}
.choice .dot{flex:none;width:20px;height:20px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center}
.choice .dot::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform var(--t)}
.choice.box .dot{border-radius:0}
.choice.box .dot::after{border-radius:0}
.choice:has(input:checked){border:2px solid var(--ink);padding:0 15px}
.choice:has(input:checked) .dot::after{transform:scale(1)}
.choice:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:3px}
.choice:has(input:disabled){color:var(--dis-text);background:var(--surface);cursor:not-allowed}
.choice:has(input:disabled) .dot{border-color:var(--dis-text)}
.choices.stack{flex-direction:column}
.choices.stack .choice{width:100%}
/* the plain option: square box, text only, ink when on */
.opt{min-height:48px;padding:0 16px;border:1px solid var(--rule);background:#fff;color:var(--ink);font:400 16px/20px var(--sans);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background var(--t),border-color var(--t)}
.opt:hover:not(:disabled){background:var(--hover)}
.opt[aria-pressed=true],.opt[aria-checked=true],.opt.on,.opt.on:hover:not(:disabled),.opt[aria-pressed=true]:hover:not(:disabled),.opt[aria-checked=true]:hover:not(:disabled){background:var(--ink);border-color:var(--ink);color:#fff}
.opt:disabled{background:var(--surface);color:var(--dis-text);cursor:not-allowed}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:32px;border-bottom:1px solid var(--rule);margin:0 0 24px;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{position:relative;min-height:48px;padding:0;border:0;background:none;color:var(--muted);font:400 16px/20px var(--sans);
  cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.tab[aria-selected=true],.tab[aria-current=page]{color:var(--ink);font-weight:600}
.tab[aria-selected=true]::after,.tab[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.tab:hover{color:var(--ink)}

/* ---------- notices ---------- */
.notice{border:1px solid var(--rule);border-left:2px solid var(--ink);background:var(--surface);padding:12px 16px;margin:0 0 16px;
  font-size:14px;line-height:20px;color:var(--ink)}
.notice.error{border-color:var(--err);border-left-color:var(--err);background:var(--err-bg);color:var(--err)}
.notice.success{border-color:#CFE3D5;border-left-color:var(--ok);background:var(--ok-bg);color:var(--ok)}
.notice .tlink{min-height:0;font-size:14px;color:inherit}

/* ---------- disclosure ---------- */
.disc{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:48px;padding:12px 0;
  border:0;border-bottom:1px solid var(--rule);background:none;color:var(--ink);font:600 16px/20px var(--sans);text-align:left;cursor:pointer}
.disc small{display:block;font-weight:400;font-size:14px;line-height:20px;color:var(--muted)}
.disc .chev{flex:none;transition:transform var(--t)}
.disc[aria-expanded=true] .chev{transform:rotate(180deg)}
.disc-panel{padding:16px 0 8px}

/* ---------- pictures ---------- */
.pic{margin:0}
.pic .frame{position:relative;aspect-ratio:3/4;background:var(--surface);overflow:hidden}
.pic .frame img{width:100%;height:100%;object-fit:contain;display:block}
.pic .frame .open{all:unset;box-sizing:border-box;position:absolute;inset:0;cursor:zoom-in}
.pic .frame .open:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.pic figcaption{padding:8px 0 0;font-size:14px;line-height:20px;color:var(--ink)}
.pic figcaption .meta{font-size:14px}
.shim{position:absolute;inset:0;background:linear-gradient(90deg,#EDEDEA,#F7F7F5,#EDEDEA);background-size:200% 100%;animation:shim 1.6s ease-in-out infinite}
@keyframes shim{0%{background-position:-200% 0}100%{background-position:200% 0}}
.pic .state{position:absolute;inset:auto 0 16px;text-align:center;font:600 14px/20px var(--sans);color:var(--ink);padding:0 12px}
.pic .fail{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px;color:var(--err);font-size:14px;line-height:20px;background:var(--err-bg)}
.pic-acts{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.pic-acts .btn{min-height:44px;padding:10px 14px;font-size:14px}
.cap2{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--muted)}

/* ---------- menus (overflow ⋯) ---------- */
.menu-pop{position:absolute;z-index:60;min-width:200px;background:#fff;border:1px solid var(--rule);box-shadow:0 12px 32px rgba(17,17,17,.10);padding:4px 0}
.menu-pop button,.menu-pop a{display:flex;align-items:center;width:100%;min-height:44px;padding:0 16px;border:0;background:none;
  color:var(--ink);font:400 16px/20px var(--sans);text-align:left;text-decoration:none;cursor:pointer}
.menu-pop button:hover,.menu-pop a:hover,.menu-pop :focus-visible{background:var(--hover);outline:0;box-shadow:none}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;background:var(--ink);color:#fff;padding:12px 16px;
  font-size:14px;line-height:20px;max-width:calc(100vw - 32px)}
.toast.bad{background:var(--err)}

/* ---------- dialogs (password etc.) ---------- */
.pw-dlg,.mh-pw{border:0;padding:0;max-width:420px;width:calc(100% - 32px);background:#fff;color:var(--ink)}
.pw-dlg::backdrop,.mh-pw::backdrop{background:rgba(17,17,17,.6)}