@font-face{font-family:"Zilla Slab";src:url(/fonts/zilla-slab-400-latin.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Zilla Slab";src:url(/fonts/zilla-slab-700-latin.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Serif Tamil";src:url(/fonts/noto-serif-tamil-500-tamil.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0964-0965,U+0B82-0BFA,U+200C-200D,U+20B9,U+25CC}

:root{
  --cream:#f3e6cf;
  --red:#a73928;
  --green:#354f3d;
  --mustard:#d7a13d;
  --pink:#e4a18a;
  --ink:#4e3d30;
  --tile:clamp(48px,7vw,84px);
}

*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:400 1.1875rem/1.6 "Zilla Slab",Georgia,serif;-webkit-text-size-adjust:100%}
[lang="ta"]{font-family:"Noto Serif Tamil","Zilla Slab",serif;font-weight:500}
p{margin:0}

.tiles{
  height:calc(var(--tile)*.4);
  background:linear-gradient(90deg,
    var(--red) 0 11.111%,var(--pink) 0 22.222%,var(--green) 0 33.333%,
    var(--mustard) 0 44.444%,var(--green) 0 55.555%,var(--pink) 0 66.666%,
    var(--red) 0 77.777%,var(--mustard) 0 88.888%,var(--green) 0 100%) 0 0/calc(var(--tile)*9) 100%;
}

main{width:min(100% - 2.5rem,44rem);margin:clamp(2rem,6vw,4.5rem) auto 0}

.sign{
  position:relative;
  padding:5.5rem clamp(1rem,5vw,3rem) clamp(2.5rem,7vw,4rem);
  text-align:center;
  border:5px solid var(--green);
  outline:2px solid var(--mustard);
  outline-offset:-12px;
}
.lockup{display:block;width:min(100%,25rem);aspect-ratio:830/625;height:auto;margin:0 auto}
.sprig{position:absolute;top:18px;width:clamp(4.5rem,16vw,10rem);height:clamp(4.5rem,16vw,10rem)}
.sprig-left{left:18px}
.sprig-right{right:18px;transform:scaleX(-1)}
.rule{width:9rem;margin:clamp(1.25rem,4vw,2rem) auto;border-top:3px solid var(--green);border-bottom:3px solid var(--mustard);height:8px}
h1{margin:0;color:var(--green);font-size:clamp(2.5rem,9vw,3.75rem);font-weight:700;line-height:1.1}
.tamil{margin-top:.35rem;color:var(--red);font-size:clamp(1.4rem,5vw,1.875rem);line-height:1.5}
.lead{max-width:24em;margin:1rem auto 0;text-wrap:balance}

figure{margin:clamp(2.5rem,7vw,4rem) 0 0}
img{display:block;width:100%;height:auto;border:5px solid var(--green)}
figcaption{margin-top:.6rem;font-size:1rem}

.story{margin-top:clamp(2.5rem,7vw,4rem)}
h2{margin:0 0 1rem;color:var(--red);font-size:clamp(1.75rem,6vw,2.5rem);font-weight:700;line-height:1.15}
.story p+p{margin-top:1em}
.story a{color:var(--red);font-weight:700;text-underline-offset:.15em}

footer{margin:clamp(3rem,8vw,5rem) 0 2.5rem;text-align:center;color:var(--green);font-size:1rem}