/* moran.onl — one painted wall. No nav, no sections.
   Mobile-first flow; the mural layout kicks in at 880px. */

:root{
  --wall:#15171a; --ink:#0b0c0e;
  --white:#f4f2ec; --lime:#b6ff2e; --green:#169b62; --orange:#ff883e;
  --gold:#e8c34a; --red:#d4353a; --stone:#cfccc2;
  --display:'Anton',Impact,sans-serif;
  --hand:'Caveat',ui-rounded,cursive;
  --sign:'Oswald','Barlow Condensed',sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--wall)}
body{
  min-height:100svh; background:var(--wall); color:var(--white);
  font-family:var(--body); -webkit-text-size-adjust:100%;
  display:grid; place-items:center; overflow-x:hidden;
}

#wall{position:fixed; inset:0; width:100%; height:100%; z-index:0; display:block}

.stage{
  position:relative; z-index:1; width:100%; max-width:100vw;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(18px,4.5vw,34px); padding:clamp(22px,6vw,40px) 16px 0;
}

/* ── painted tricolour ─────────────────────────────────────────────── */
.tri{order:3; width:min(88vw,330px); height:clamp(104px,26vw,140px); opacity:.88; overflow:visible}

/* ── castle, taped up like a photograph ───────────────────────────── */
.castle{order:4; position:relative; margin:0; width:min(56vw,208px);
  padding:7px 7px 24px; background:#eae6da; transform:rotate(1.6deg);
  box-shadow:0 18px 38px rgba(0,0,0,.62)}
.castle svg{display:block; width:100%; height:auto; aspect-ratio:6/5; object-fit:cover}
.tape{position:absolute; display:block; width:38%; height:16px; background:rgba(238,233,214,.4);
  border-left:1px solid rgba(255,255,255,.22); border-right:1px solid rgba(255,255,255,.22);
  box-shadow:0 1px 3px rgba(0,0,0,.35)}
.tape--a{top:-8px; left:-6%; transform:rotate(-7deg)}
.tape--b{bottom:-8px; right:-6%; transform:rotate(-5deg)}

/* ── lion ──────────────────────────────────────────────────────────── */
.lion{width:min(58vw,216px); height:auto; order:5;
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.68))}
.lion-paint path,.lion-paint circle{mix-blend-mode:screen}

/* ── crest poster ──────────────────────────────────────────────────── */
.crest{
  order:6; width:min(48vw,178px); padding:10px 8px 6px;
  background:linear-gradient(#f7f4ea,#e4e0d2); color:#1b2a20;
  box-shadow:0 14px 30px rgba(0,0,0,.6); transform:rotate(-1.4deg);
  clip-path:polygon(1% 2%,99% 0,100% 97%,60% 100%,30% 98%,0 100%);
  text-align:center;
}
.crest svg{width:100%; height:auto; display:block}
.crest-name{display:block; font-family:var(--serif); font-size:clamp(20px,5.6vw,30px);
  color:#14452c; letter-spacing:.01em; line-height:1}

/* ── the wordmark ──────────────────────────────────────────────────── */
.mark{order:1; width:min(98vw,720px)}
.mark svg{width:100%; height:auto; display:block; overflow:visible}
.swash{stroke-dasharray:1000; stroke-dashoffset:1000; animation:draw 1.1s .25s ease-out forwards}
.drips path,.swashdrips path{stroke-dasharray:120; stroke-dashoffset:120; animation:draw .8s 1s ease-in forwards}
.drips circle,.swashdrips circle{opacity:0; animation:blob .35s 1.7s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes blob{to{opacity:1}}

.strap{order:2; margin:0; font-family:var(--sign); font-weight:500;
  font-size:clamp(10px,2.5vw,15px); letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,242,236,.82); text-align:center; text-wrap:balance}
.strap b{color:var(--lime)}

/* ── handwritten notes ─────────────────────────────────────────────── */
.note{
  margin:0; font-family:var(--hand); font-weight:700; line-height:1.02;
  font-size:clamp(22px,6.6vw,34px); color:var(--white); text-align:center;
  text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.note--tl{order:8; text-transform:uppercase; letter-spacing:.005em}
.note--tl::after,.note--r1::after{content:''; display:block; width:52%; height:6px; margin:.32em auto 0;
  background:var(--lime); border-radius:4px; opacity:.9;
  clip-path:polygon(0 30%,8% 0,94% 12%,100% 70%,90% 100%,6% 88%)}
.note--crest{order:7; font-weight:600; transform:rotate(-4deg);
  font-size:clamp(18px,5.2vw,26px)}
.note--r1{order:10; text-transform:uppercase}
.note--r2{order:11; text-transform:uppercase}
.crownlet{display:block; font-size:.62em; color:var(--white); opacity:.75; line-height:1}

.roll{order:9; list-style:none; margin:0; padding:0; text-align:center}
.roll li{font-family:var(--sign); font-weight:500; text-transform:uppercase;
  letter-spacing:.24em; font-size:clamp(11px,3vw,14px); color:rgba(244,242,236,.8); line-height:1.75}

/* ── barrel ────────────────────────────────────────────────────────── */
.barrel{order:12; position:relative; width:min(56vw,208px); display:grid; place-items:center}
.barrel svg{width:100%; height:auto; display:block; filter:drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.barrel-t{position:absolute; margin:0; text-align:center; font-family:var(--sign); font-weight:600;
  text-transform:uppercase; letter-spacing:.1em; line-height:1.34;
  font-size:clamp(11px,3.3vw,15px); color:var(--gold); text-shadow:0 1px 0 #000}

/* ── slate board ───────────────────────────────────────────────────── */
.board{
  order:13; width:min(56vw,200px); padding:16px 12px 12px; text-align:center;
  background:linear-gradient(160deg,#23262a,#14161a); border:1px solid rgba(244,242,236,.1);
  box-shadow:0 14px 28px rgba(0,0,0,.6), inset 0 0 40px rgba(0,0,0,.5);
  transform:rotate(1.6deg); color:rgba(244,242,236,.9);
}
.board p{margin:0 0 12px; font-family:var(--hand); font-weight:700; line-height:1.04;
  font-size:clamp(20px,5.6vw,28px); text-transform:uppercase}
.board .sham{width:26px; height:auto; opacity:.55; color:rgba(244,242,236,.9)}

/* ── fingerpost ────────────────────────────────────────────────────── */
.post{order:14; position:relative; width:min(58vw,210px); padding:6px 0 0}
.post-mast{position:absolute; left:50%; top:0; bottom:0; width:7px; margin-left:-3.5px;
  background:linear-gradient(90deg,#3a332a,#6a5c47,#2c261f); border-radius:2px}
.post ul{list-style:none; margin:0; padding:0; position:relative}
.post li{
  background:linear-gradient(#f4f2ea,#d9d5c7); color:#1a1c1f;
  font-family:var(--sign); font-weight:600; text-transform:uppercase;
  letter-spacing:.11em; font-size:clamp(10px,2.7vw,13px);
  padding:5px 12px; margin:0 0 5px; width:84%;
  box-shadow:0 4px 9px rgba(0,0,0,.5); position:relative;
}
.post li.r{margin-left:16%; clip-path:polygon(0 0,89% 0,100% 50%,89% 100%,0 100%); text-align:left}
.post li.l{margin-left:0; clip-path:polygon(11% 0,100% 0,100% 100%,11% 100%,0 50%); text-align:right}

/* ── carved stone sign ─────────────────────────────────────────────── */
.stone{
  order:15; width:min(66vw,250px); padding:14px 18px 16px; text-align:center;
  background:linear-gradient(150deg,#d6d2c6,#a9a598 55%,#8e8b80);
  border:2px solid rgba(0,0,0,.25); transform:rotate(-1deg);
  box-shadow:0 16px 30px rgba(0,0,0,.6), inset 0 2px 0 rgba(255,255,255,.35);
  color:#2b2e2c;
}
.stone-a,.stone-b{display:block; font-family:var(--sign); font-weight:600; text-transform:uppercase;
  text-shadow:0 1px 0 rgba(255,255,255,.4), 0 -1px 0 rgba(0,0,0,.35)}
.stone-a{font-size:clamp(24px,6.6vw,34px); letter-spacing:.06em}
.stone-a .sham{width:.62em; height:auto; margin-left:.22em; color:#2f6b3f; vertical-align:baseline}
.stone-b{font-size:clamp(16px,4.4vw,22px); letter-spacing:.3em; opacity:.8}

/* ── tartan ────────────────────────────────────────────────────────── */
.tartan{
  order:16; width:100vw; height:clamp(56px,14vw,96px); margin-top:8px;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.34) 0 6px,transparent 6px 40px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.34) 0 6px,transparent 6px 40px),
    repeating-linear-gradient(90deg,#c9a227 0 3px,transparent 3px 64px),
    repeating-linear-gradient(0deg,#b8232a 0 3px,transparent 3px 64px),
    repeating-linear-gradient(90deg,#1c3f2a 0 32px,#16314f 32px 64px),
    #14251c;
  box-shadow:inset 0 14px 26px rgba(0,0,0,.7); opacity:.9;
}

/* ── hint ──────────────────────────────────────────────────────────── */
.hint{
  position:fixed; z-index:3; left:50%; bottom:10px; transform:translateX(-50%);
  margin:0; font-family:var(--sign); font-weight:500; text-transform:uppercase;
  letter-spacing:.3em; font-size:11px; color:rgba(244,242,236,.42);
  pointer-events:none; transition:opacity .5s; animation:pulse 3.4s ease-in-out infinite;
}
.hint.gone{opacity:0}
@keyframes pulse{0%,100%{opacity:.42}50%{opacity:.85}}

/* ════════════════════════════════════════════════════════════════════
   The mural: a fixed 3:2 wall, everything scaled in container units.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width:880px){
  body{overflow:hidden; height:100svh}

  .stage{
    container-type:size;
    width:min(100vw,150svh); height:min(66.6667vw,100svh);
    display:block; padding:0; gap:0;
  }
  .stage>*{position:absolute}

  .tri{right:2.5cqw; top:0; width:40cqw; height:36cqh; z-index:1}
  .castle{right:1cqw; top:4cqh; width:16cqw; padding:.4cqw .4cqw 1.5cqw; z-index:2}
  .tape{width:40%; height:1.1cqw}
  .lion{left:55.5cqw; top:0.5cqh; width:27cqw; z-index:3}
  .crest{left:18cqw; top:1cqh; width:16.5cqw; padding:.7cqw .6cqw .4cqw; z-index:3}
  .crest-name{font-size:3.1cqw}

  .mark{left:14cqw; top:30cqh; width:66cqw; z-index:4}
  .strap{left:23cqw; top:73cqh; width:42cqw; font-size:1.18cqw; letter-spacing:.32em; z-index:4}

  .note{font-size:2.55cqw}
  .note--tl{left:2.4cqw; top:4cqh; width:15cqw; text-align:left}
  .note--tl::after{margin-left:0; width:7cqw; height:.45cqw}
  .roll{left:2.6cqw; top:24cqh; text-align:left}
  .roll li{font-size:1.06cqw; line-height:1.95}
  .note--crest{left:44.5cqw; top:8cqh; width:13cqw; font-size:2cqw; text-align:left}
  .note--r1{left:80.5cqw; top:38cqh; width:18cqw; text-align:left}
  .note--r1::after{margin-left:0; width:6.4cqw; height:.45cqw}
  .note--r2{left:78.5cqw; top:53cqh; width:20.5cqw; text-align:left}

  .barrel{left:.6cqw; top:43cqh; width:19cqw; z-index:4}
  .barrel-t{font-size:1.3cqw}
  .board{left:67cqw; top:auto; bottom:3.5cqh; width:15.5cqw; padding:1.1cqw .9cqw .8cqw; z-index:5}
  .board p{font-size:2.1cqw; margin-bottom:.7cqw}
  .board .sham{width:1.9cqw}
  .post{left:86cqw; top:auto; bottom:2.5cqh; width:12.5cqw; z-index:5}
  .post li{font-size:.85cqw; padding:.2cqw .7cqw; margin-bottom:.26cqw}
  .stone{left:3.5cqw; top:auto; bottom:6cqh; width:20cqw; padding:1cqw 1.2cqw 1.1cqw; z-index:5}
  .stone-a{font-size:2.7cqw}
  .stone-b{font-size:1.6cqw}
  .tartan{left:26cqw; bottom:0; top:auto; width:48cqw; height:15cqh; margin:0; z-index:4;
    transform:skewX(-2deg)}
  .hint{left:2.5cqw; bottom:2.5cqh; transform:none; font-size:.9cqw}
}

@media (prefers-reduced-motion:reduce){
  .swash,.drips path,.drips circle,.swashdrips path,.swashdrips circle{animation:none; stroke-dashoffset:0; opacity:1}
  .hint{animation:none}
}