/* The paper look of the wall, for the studio, the video page and the own page. Loaded after each page's own styles. */
:root {
  --paper:#f6eeda; --note:#fffdf6; --ink:#3b2a3a; --soft:#6f5f68; --line:#dccfb6; --bg:#f6eeda;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --shadow:0 1px 1px rgba(59,42,58,.14), 0 10px 18px -10px rgba(59,42,58,.32);
}
html { -webkit-text-size-adjust:100%; }
body { position:relative; }
body {
  font:17px/1.55 var(--serif); color:var(--ink); background-color:var(--paper);
  background-image:radial-gradient(rgba(120,90,40,.07) 1px, transparent 1.2px), radial-gradient(rgba(120,90,40,.05) 1px, transparent 1.2px);
  background-size:23px 23px, 37px 37px; background-position:0 0, 11px 17px;
}
a { color:var(--accent); }
:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

/* headings and header */
header { background:transparent; border-bottom:1px solid var(--line); position:relative; }
header h1, h1 { font-family:var(--serif); font-weight:500; letter-spacing:-.01em; }
header h1 { font-size:clamp(28px, 5vw, 40px); line-height:1.1; }
header p { font-size:15px; max-width:44em; }
section h2, h2 { font-family:var(--serif); }
section h2 { font-size:13px; letter-spacing:.08em; }

/* cards: paper notes */
section, .box { background:var(--note); border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow); }
.card, .sitem { background:var(--note); border-color:var(--line); border-radius:8px; font-family:inherit; color:var(--ink); }
.card:hover, .card.sel { box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.card b { font-weight:600; }
.sitem.sel { background:color-mix(in srgb, var(--accent) 8%, var(--note)); }

/* buttons and fields */
button, .btn { font-family:inherit; font-size:16px; border-radius:999px; border-color:var(--line); background:var(--note); color:var(--ink); padding:9px 18px; }
button.card, button.sitem { border-radius:8px; padding:14px; }
button.primary, .btn.primary, .primary { background:var(--accent); border-color:var(--accent); color:#fff; }
button.danger, .danger { color:#a32a22; }
input, select, textarea { font-family:inherit; font-size:16px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; }
input[type=number], select { padding:6px 8px; }
textarea { line-height:1.5; }
label { color:var(--soft); font-size:14.5px; }
.field { font-size:15px; }
.hint, .small { color:var(--soft); }
#status, .dots { color:var(--soft); }
#wizHead h2 { font-family:var(--serif); font-weight:500; font-size:clamp(26px, 5vw, 34px); line-height:1.15; }
progress { accent-color:var(--accent); }
#stage { border-radius:6px; box-shadow:var(--shadow); }
#result video { border-radius:6px; box-shadow:var(--shadow); }
.thumb img { border-radius:3px; }

/* video page (centred, like a note on the wall) and own page */
.pg-v main, .pg-my main { padding-top:26px; }
.pg-v video { border:9px solid var(--note); border-radius:3px; box-shadow:0 1px 1px rgba(59,42,58,.18), 0 18px 28px -12px rgba(59,42,58,.45); background:#1d151d; }
.pg-my video { border:6px solid var(--note); border-radius:3px; box-shadow:var(--shadow); }
.pg-v h1 { font-size:clamp(26px, 6vw, 36px); line-height:1.15; margin:6px 0 16px; }
.pg-my h1 { font-size:clamp(26px, 6vw, 34px); line-height:1.15; }
.pg-my h2 { font-size:18px; font-weight:500; margin:26px 0 6px; }
.pg-v .cards img, .pg-v .cards .ph { border-radius:3px; border:5px solid var(--note); box-shadow:var(--shadow); }
.pg-v .ripple, .pg-my .ripple { border-top-color:var(--line); }

/* a hint folded on small screens: one tap on "More info" */
details.fold { margin:6px 0 0; }
details.fold > summary { cursor:pointer; color:var(--soft); font-size:15px; padding:6px 0; list-style:none; }
details.fold > summary::-webkit-details-marker { display:none; }
details.fold > summary::before { content:"ⓘ "; }
details.fold[open] > summary { color:var(--ink); }
details.fold > p { margin:2px 0 8px; }

/* phones: bigger text, bigger touch targets, less on the screen at once */
@media (max-width:820px) {
  body { font-size:18px; }
  header { padding:16px 16px 12px; }
  header p { font-size:15.5px; }
  label { font-size:16px; }
  .field { font-size:16.5px; }
  .field input { padding:11px 10px; font-size:17px; }
  textarea { font-size:17px; padding:12px; }
  select, input[type=number] { font-size:16px; padding:9px 8px; }
  .hint, .small { font-size:15.5px; line-height:1.5; }
  #wizHead .dots { font-size:15px; }
  .card { padding:16px; } .card b { font-size:18.5px; line-height:1.25; margin-bottom:2px; } .card span { font-size:15.5px; }
  .sitem { padding:13px 14px; } .sitem b { font-size:17.5px; } .sitem span { font-size:15.5px; }
  button, .btn { min-height:46px; font-size:16.5px; }
  button.card, button.sitem { min-height:0; }
  .thumb button { min-height:0; }
  body.wiz #wizNav { position:sticky; bottom:0; padding:10px 0 12px; background:linear-gradient(to top, var(--paper) 75%, transparent); margin-top:14px; z-index:5; }
  body.wiz #wizNav button { min-width:130px; min-height:50px; font-size:17.5px; }
  body.wiz:not([data-wstep="1"]) #studioIntro { display:none; }
  body.wiz section { padding:14px; }
  .pg-v main, .pg-my main { padding-left:14px; padding-right:14px; }
  .pg-v .row .btn, .pg-v .row button { flex:1 1 auto; }
}
@media (max-width:420px) { .pg-v .cards a { width:46%; } .pg-v .cards img, .pg-v .cards .ph { width:100%; height:auto; aspect-ratio:3 / 4; } }
@media (max-width:820px) { #wizard a, #wizBack a { font-size:16px; } }
.card, .sitem { display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-start; }
#emailRow { display:block; }
#emailRow input { max-width:100%; }