:root {
  --bg:#ffffff; --ink:#252331; --muted:#625e70; --surface:#f7f5fb; --line:#e2deeb;
  --accent:#5b3fa8; --accent-hover:#493188; --on-accent:#ffffff; --error:#9f2f2d;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px;
  --gutter:clamp(16px,4vw,48px); --measure:1280px; --target:48px;
  --body:17px; --small:15px; --title:clamp(32px,6vw,64px); --subtitle:24px;
  --radius:14px; --control-radius:8px; --duration:140ms;
  color-scheme:light;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:var(--body)/1.6 system-ui,sans-serif; }
a { color:var(--accent); text-underline-offset:var(--s1); }
:focus-visible { outline:2px solid var(--accent); outline-offset:var(--s1); }
.page { max-inline-size:calc(var(--measure) + 2 * var(--gutter)); margin-inline:auto; padding:var(--s8) var(--gutter); }
.wordmark { display:inline-flex; align-items:center; min-block-size:var(--target); font-weight:650; color:var(--ink); text-decoration:none; }
.eyebrow,.hint,footer { color:var(--muted); font-size:var(--small); }
.eyebrow { margin:0; }
h1 { margin:var(--s3) 0 var(--s6); font-size:var(--title); line-height:1.1; letter-spacing:-.03em; font-weight:650; }
h2 { margin:0 0 var(--s3); font-size:var(--subtitle); line-height:1.3; font-weight:650; }
p { margin:0 0 var(--s4); overflow-wrap:anywhere; }
.lead { max-inline-size:56ch; color:var(--muted); }
.login-intro,.catalog-intro { padding-block:var(--s12) var(--s8); }
.login-panel { max-inline-size:480px; padding:var(--s8); background:var(--surface); border-radius:var(--radius); }
.stack { display:flex; flex-direction:column; gap:var(--s3); margin-block-start:var(--s6); }
label { font-weight:550; }
input,button { font:inherit; }
input[type=email],input[name=code] { inline-size:100%; min-block-size:var(--target); border:1px solid var(--line); border-radius:var(--control-radius); padding:var(--s3); background:var(--bg); color:var(--ink); }
button { min-block-size:var(--target); border:0; padding:var(--s3) var(--s4); border-radius:var(--control-radius); background:var(--accent); color:var(--on-accent); cursor:pointer; transition:opacity var(--duration) ease-out; }
button:hover { background:var(--accent-hover); }
button:active,a:active { opacity:.8; }
button:disabled { opacity:.6; cursor:wait; }
button.secondary { background:var(--surface); color:var(--ink); }
.check { display:flex; gap:var(--s2); align-items:center; min-block-size:var(--target); font-size:var(--small); font-weight:400; }
.check input { inline-size:var(--s6); block-size:var(--s6); accent-color:var(--accent); flex-shrink:0; }
.hint { margin:var(--s2) 0 0; }
.notice { padding:var(--s4); background:var(--bg); border-radius:var(--control-radius); }
.error { color:var(--error); }
.resend { margin-block:var(--s6); }
summary { cursor:pointer; min-block-size:var(--target); color:var(--accent); }
.topbar { display:flex; justify-content:space-between; align-items:center; gap:var(--s4); flex-wrap:wrap; }
.album-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr)); gap:var(--s8) var(--s6); }
.album-card { min-inline-size:0; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); text-decoration:none; background:var(--bg); }
.album-card:hover { background:var(--surface); }
.album-card img { display:block; inline-size:100%; block-size:auto; aspect-ratio:16/9; }
.album-copy { padding:var(--s6); }
.album-copy h2 { margin-block:var(--s2) var(--s3); }
.album-copy p:last-child { margin:0; color:var(--muted); font-size:var(--small); }
footer { margin-block-start:var(--s12); padding-block-start:var(--s6); border-block-start:1px solid var(--line); }
@media (max-width:639px) { .login-panel { padding:var(--s6); } .login-intro,.catalog-intro { padding-block-start:var(--s8); } }