/* The Colin Times : base, intro, masthead, stories, Christmas panel */
:root{
  --paper:#f3eee3; --paper-2:#e9e2d2; --card:#fffaf0;
  --ink:#1b1915; --ink-soft:#57524a; --accent:#a3201c;
  --desk:#1d1915; --gut:16px;
  --head:'Playfair Display','Times New Roman',Times,serif;
  --body:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Libre Franklin','Helvetica Neue',Arial,sans-serif;
  --black:'UnifrakturCook','Old English Text MT','Times New Roman',serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.locked{overflow:hidden}
body{margin:0;background:var(--desk);color:var(--ink);font-family:var(--body);font-size:17.5px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
a{color:inherit}
h1,h2,h3,p,figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hand{font-family:'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols2',sans-serif;font-variant-emoji:text;display:inline-block;margin-right:3px}

/* ---------- intro: folded paper ---------- */
.intro{display:none}
html.js .intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:34px;background:radial-gradient(90% 70% at 50% 38%,#3b342b 0%,#1d1915 68%,#110e0b 100%);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:opacity .6s ease,visibility 0s linear .6s}
html.js .intro.leave{opacity:0;visibility:hidden;pointer-events:none}
.ip-spin{visibility:hidden}
.intro.go .ip-spin{visibility:visible;animation:spinIn 1.25s cubic-bezier(.16,.84,.3,1) both}
@keyframes spinIn{0%{transform:scale(.03) rotate(-1080deg);opacity:0}55%{opacity:1}100%{transform:scale(1) rotate(-2.5deg);opacity:1}}
.ip-zoom{transition:transform .8s cubic-bezier(.3,.7,.2,1)}
.intro.open .ip-zoom{transform:translateY(-70px)}
.intro.leave .ip-zoom{transform:translateY(-70px) scale(2.3);transition:transform .7s cubic-bezier(.5,0,.9,.5)}
.ip{position:relative;width:min(84vw,350px);perspective:1100px;color:var(--ink);filter:drop-shadow(0 18px 30px rgba(0,0,0,.55))}
.ip-top{position:relative;background:var(--paper);padding:16px 18px 18px;text-align:center}
.ip-top::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(#d8cfbc,#b5ab96);transition:opacity .3s}
.intro.open .ip-top::after{opacity:0}
.ip-extra{font-family:var(--sans);font-weight:800;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--accent)}
.ip-title{font-family:var(--black);font-weight:700;font-size:40px;line-height:1;margin:6px 0 8px}
.ip-date{font-family:var(--sans);font-weight:700;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:5px 0;margin-bottom:12px}
.ip-head{font-family:var(--head);font-weight:900;font-size:25px;line-height:1.05;letter-spacing:-.01em}
.ip-for{margin-top:12px;font-family:var(--sans);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
.ip-bottom{position:absolute;top:100%;left:0;right:0;background:var(--paper-2);padding:16px 18px 18px;transform-origin:top center;transform:rotateX(-91deg);transition:transform .85s cubic-bezier(.3,.7,.2,1),background .85s;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.intro.open .ip-bottom{transform:rotateX(0deg);background:var(--paper)}
.ip-cols{display:grid;grid-template-columns:44% 1fr;gap:12px;margin-bottom:10px}
.ip-pic{position:relative;min-height:104px;background:#cfc6b2 url(photo.jpg) 58% 30%/cover no-repeat;filter:grayscale(1) contrast(1.2) brightness(1.06)}
.ip-pic::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(27,25,21,.5) 0 33%,transparent 35%);background-size:3.5px 3.5px;mix-blend-mode:multiply;opacity:.5}
.ip-lines i{display:block;height:5px;background:rgba(27,25,21,.22);margin:0 0 7px}
.ip-lines i:nth-child(3n){width:82%}.ip-lines i:nth-child(4n){width:94%}.ip-lines i:last-child{width:60%;margin:0}
.intro-hint{font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:#efe7d6;opacity:0;transition:opacity .5s}
.intro.go .intro-hint{opacity:1;transition-delay:1.2s;animation:pulse 1.8s ease-in-out 1.7s infinite}
.intro.open .intro-hint{opacity:0;animation:none;transition-delay:0s}
@keyframes pulse{50%{opacity:.45}}

/* ---------- the paper ---------- */
.paper{position:relative;max-width:1120px;margin:0 auto;padding:0 var(--gut) 34px;background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .06 .17 0 0 0 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E")}

.ticker{display:flex;align-items:stretch;margin:0 calc(var(--gut)*-1);background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.ticker-tag{flex:none;background:var(--accent);color:#fff;padding:9px 12px;font-weight:800}
.ticker-win{flex:1;min-width:0;overflow:hidden;display:flex;align-items:center}
.ticker-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:tick 50s linear infinite}
.ticker-track span{padding:0 20px;position:relative}
.ticker-track span::after{content:"";position:absolute;right:-3px;top:50%;width:5px;height:5px;margin-top:-3px;background:var(--accent);transform:rotate(45deg)}
@keyframes tick{to{transform:translateX(-50%)}}

.mast{text-align:center;padding:20px 0 0}
.ears{display:grid;grid-template-columns:1fr 1fr;grid-template-areas:"t t" "l r";gap:12px 10px;align-items:stretch}
.mast-title{grid-area:t;font-family:var(--black);font-weight:700;font-size:clamp(46px,14.6vw,116px);line-height:.95;letter-spacing:.005em}
.ear{border:1px solid var(--ink);padding:7px 9px 8px;font-family:var(--sans);font-size:11px;line-height:1.35;text-align:left;font-weight:500}
.ear b{display:block;font-weight:800;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:2px}
.ear-l{grid-area:l}.ear-r{grid-area:r}
.motto{font-family:var(--head);font-style:italic;font-weight:700;font-size:14.5px;margin:12px 0;color:var(--ink-soft)}
.dateline{display:flex;flex-wrap:wrap;justify-content:center;gap:3px 16px;border-top:3px double var(--ink);border-bottom:1px solid var(--ink);padding:7px 0;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.special{margin:11px 0 12px;font-family:var(--sans);font-weight:800;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}

.index{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;margin:0 calc(var(--gut)*-1);padding-left:calc(var(--gut) - 10px);background:var(--paper);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.index-links{flex:1;min-width:0;display:flex;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.index-links::-webkit-scrollbar{display:none}
.index a{flex:none;padding:11px 10px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.index a b{color:var(--accent);margin-right:5px;font-weight:800}
.index a.on{border-bottom-color:var(--accent)}
.index-found{flex:none;display:flex;align-items:baseline;gap:1px;padding:9px 12px 0;border-left:1px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12px;font-weight:800;font-variant-numeric:tabular-nums}
.index-found b{color:#ffd9a0}
.index-found small{margin-left:5px;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;opacity:.8}
.index-found.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.18)}}

.howto,.how{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.1em;line-height:1.5;text-transform:uppercase;color:var(--ink-soft)}
.howto{padding:12px 0;border-bottom:1px solid var(--ink)}
.how{margin-top:12px}

/* ---------- stories ---------- */
.story{position:relative;padding:26px 0 30px;border-bottom:1px solid var(--ink);scroll-margin-top:44px}
html.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
html.js .reveal.in{opacity:1;transform:none}
.kicker{display:flex;align-items:center;gap:8px;margin-bottom:9px;font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.folio{color:var(--ink);border:1px solid currentColor;padding:1px 5px;letter-spacing:.05em;font-size:10px}
.hed{font-family:var(--head);font-weight:900;font-size:clamp(28px,7.8vw,38px);line-height:1.07;letter-spacing:-.012em;margin-bottom:11px;text-wrap:balance}
.hed-xl{font-size:clamp(35px,9.8vw,60px);line-height:1.02}
.deck{font-family:var(--head);font-style:italic;font-weight:700;font-size:18px;line-height:1.32;color:var(--ink-soft);margin-bottom:13px}
.byline{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:7px 0;margin-bottom:16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.byline b{font-weight:800}
.copy p{margin-bottom:.85em}
.copy p:last-child{margin-bottom:0}
.place{font-family:var(--sans);font-weight:800;font-size:.76em;letter-spacing:.09em}
.pull{font-family:var(--head);font-style:italic;font-weight:700;font-size:23px;line-height:1.24;text-align:center;text-wrap:balance;padding:16px 4px;margin:20px 0;border-top:3px double var(--ink);border-bottom:3px double var(--ink)}
.sub-hed{font-family:var(--head);font-weight:900;font-size:22px;line-height:1.15}
.sub-deck{font-family:var(--head);font-style:italic;font-weight:700;font-size:15.5px;color:var(--ink-soft);margin-top:3px}

.btn{display:inline-block;-webkit-appearance:none;appearance:none;border:1.5px solid var(--ink);border-radius:0;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.15em;text-transform:uppercase;text-decoration:none;padding:14px 20px;cursor:pointer;touch-action:manipulation;transition:transform .12s,opacity .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:translateY(1px) scale(.985)}
.btn:disabled{opacity:.35;cursor:default}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-red{background:var(--accent);border-color:var(--accent);color:#fff}

/* photo */
.photo{margin:0 0 18px}
.photo-btn{position:relative;display:block;width:100%;padding:0;border:1px solid var(--ink);background:var(--paper-2);cursor:pointer;overflow:hidden;aspect-ratio:1/1;-webkit-tap-highlight-color:transparent}
.photo-btn img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.22) brightness(1.08) sepia(.18);transition:filter .7s ease}
.photo-tone{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(circle,rgba(20,18,14,.55) 0 33%,transparent 35%);background-size:3.5px 3.5px;mix-blend-mode:multiply;opacity:.5;transition:opacity .7s}
.photo.color img{filter:none}
.photo.color .photo-tone{opacity:0}
.photo-ph{display:none;position:relative;border:1px solid var(--ink);aspect-ratio:4/5;overflow:hidden}
.photo-ph svg{width:100%;height:100%}
.photo-ph-text{position:absolute;left:0;right:0;bottom:0;padding:10px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-weight:800;font-size:10.5px;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;text-align:center}
.photo.none .photo-btn{display:none}
.photo.none .photo-ph{display:block}
.photo.none .tap-hint{display:none}
.photo figcaption{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink-soft);padding-top:8px}
.photo figcaption b{color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.tap-hint{display:block;margin-top:3px;font-weight:700;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- Christmas: the only color in the paper ---------- */
.night{margin:0 calc(var(--gut)*-1);padding:64px var(--gut) 34px;border-bottom:0;overflow:hidden;color:#f2ecdf;background:radial-gradient(120% 80% at 50% 0%,#202b47 0%,#0e1323 58%,#080b15 100%);cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
.night .kicker{color:#f2c14e}
.night .folio{color:#f2ecdf}
.night .hed{color:#fff}
.snow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.night-in{position:relative;z-index:1;max-width:620px;margin:0 auto}
.lights{position:absolute;top:0;left:0;right:0;height:60px;pointer-events:none;z-index:1}
.lights svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lights path{fill:none;stroke:#46506b;stroke-width:1.5;vector-effect:non-scaling-stroke}
.bulb{position:absolute;width:9px;height:13px;margin-left:-4.5px;border-radius:50%/42% 42% 58% 58%;background:var(--c);box-shadow:0 0 12px 3px var(--c);animation:twinkle 2.6s ease-in-out infinite;animation-delay:var(--d)}
.bulb::before{content:"";position:absolute;top:-4px;left:2.5px;width:4px;height:5px;background:#46506b;border-radius:1px}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.3}}
.big-line{font-family:var(--head);font-style:italic;font-weight:700;font-size:25px;line-height:1.22;color:#fff;margin:20px 0 0;text-wrap:balance}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:24px 0 8px}
.cd-cell{border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.05);padding:13px 2px 10px;text-align:center}
.cd-num{display:block;font-family:var(--sans);font-weight:800;font-size:clamp(28px,9vw,44px);line-height:1;font-variant-numeric:tabular-nums}
.cd-lab{display:block;margin-top:7px;font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.cd-cap{font-family:var(--head);font-style:italic;font-size:15px;text-align:center;opacity:.85}
.night .how{color:#f2ecdf;opacity:.7;text-align:center;margin-top:18px}

html.still{scroll-behavior:auto}
html.still *,html.still *::before,html.still *::after{animation:none!important;transition:none!important}
html.still .ip-spin{visibility:visible}
html.still .intro-hint{opacity:1}
html.js.still .reveal{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  .intro.go .ip-spin{animation:none}
  .ticker-track,.bulb,.intro.go .intro-hint{animation:none}
}