/* The Colin Times : interactive pieces, classifieds, footer, desktop grid */

/* chalkboard: the 45 minute challenge */
.board{position:relative;margin-top:22px;padding:16px 16px 18px;background:#18221d;color:#eef1ea;border:7px solid #5a4330;box-shadow:inset 0 0 44px rgba(0,0,0,.5);overflow:hidden;text-align:center}
.board-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;opacity:.75}
.board-timer{font-family:var(--sans);font-weight:800;font-size:clamp(52px,17vw,76px);line-height:1;margin:14px 0 12px;font-variant-numeric:tabular-nums;letter-spacing:.01em}
.board-meter{display:flex;align-items:center;gap:10px;font-family:var(--sans);font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.bm-bar{flex:1;height:10px;border:1.5px solid #eef1ea;padding:1.5px}
.bm-bar i{display:block;height:100%;width:100%;background:#eef1ea;transition:width .9s ease,background .9s}
.board-status{font-family:var(--head);font-style:italic;font-weight:700;font-size:18px;line-height:1.3;min-height:3.9em;margin:14px 0 12px;display:flex;align-items:center;justify-content:center}
.btn-chalk{background:transparent;border-color:#eef1ea;color:#eef1ea}
.doodle{position:absolute;width:40px;height:40px;fill:none;stroke:#eef1ea;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.8;pointer-events:none}
.doodle path{stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.1s ease}
.doodle.on path{stroke-dashoffset:0}
.d1{top:30px;right:8px;transform:rotate(12deg)}.d2{bottom:58px;left:8px}.d3{bottom:64px;right:10px;transform:rotate(-8deg)}
.plane{position:fixed;left:-70px;top:46vh;width:48px;height:48px;z-index:90;pointer-events:none;animation:fly 2.5s cubic-bezier(.3,.1,.5,1) forwards}
@keyframes fly{0%{transform:translate(0,0) rotate(10deg)}35%{transform:translate(40vw,-16vh) rotate(-16deg)}70%{transform:translate(78vw,-3vh) rotate(12deg)}100%{transform:translate(calc(100vw + 140px),-24vh) rotate(-14deg)}}

.notice{margin-top:22px;border:3px double var(--ink);padding:14px 16px;text-align:center}
.notice h3{font-family:var(--sans);font-weight:800;font-size:11px;letter-spacing:.22em;text-transform:uppercase;margin-bottom:7px}
.notice p{font-size:16.5px;line-height:1.45}
.notice .sig{font-family:var(--head);font-style:italic;font-weight:700;margin-top:8px}

/* redacted file */
.dossier{position:relative;margin-top:22px;border:1.5px solid var(--ink);padding:13px 14px 14px;background:rgba(255,250,240,.6)}
.dossier-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:8px;margin-bottom:8px}
.dossier-head span:last-child{color:var(--accent)}
.redactions{list-style:none;margin:0;padding:0;counter-reset:r}
.redactions li{counter-increment:r;display:flex;gap:10px;align-items:center;padding:6px 0}
.redactions li::before{content:counter(r,decimal-leading-zero);flex:none;width:20px;font-family:var(--sans);font-size:11px;font-weight:700;color:var(--ink-soft)}
.redact{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:none;text-align:left;cursor:pointer;font-family:var(--body);font-size:18px;line-height:1.35;-webkit-tap-highlight-color:transparent}
.redact span{position:relative;display:inline-block;color:transparent;transition:color .3s .15s}
.redact span::after{content:"";position:absolute;inset:0 -5px;background:var(--ink);transform-origin:right center;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.redact.open{cursor:default}
.redact.open span{color:var(--ink)}
.redact.open span::after{transform:scaleX(0)}
.stamp{position:absolute;right:10px;bottom:34px;font-family:var(--sans);font-weight:800;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);border:3px solid var(--accent);padding:5px 10px;transform:rotate(-9deg);opacity:0;pointer-events:none;mix-blend-mode:multiply}
.dossier,#factcheck{overflow:hidden}
.dossier.done .stamp,.stamp-on.in-view{animation:stampIn .45s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes stampIn{from{transform:rotate(-9deg) scale(1.8);opacity:0}to{transform:rotate(-9deg) scale(1);opacity:.85}}
html.still .dossier.done .stamp,html.still .stamp-on{opacity:.85}
#factcheck .stamp{position:relative;display:inline-block;right:auto;bottom:auto;margin-top:18px}

/* topic dealer */
.dealer{margin-top:28px;text-align:center}
.card{perspective:900px;height:158px;max-width:420px;margin:14px auto 16px}
.card-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform .7s cubic-bezier(.3,.9,.3,1)}
.card-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px 20px;border:1.5px solid var(--ink);-webkit-backface-visibility:hidden;backface-visibility:hidden;font-family:var(--head);font-weight:700;font-style:italic;font-size:21px;line-height:1.25;text-wrap:balance;background:var(--card);box-shadow:0 8px 18px rgba(27,25,21,.16)}
.card-front{transform:rotateY(0deg)}
.card-back{transform:rotateY(180deg)}
.card-face.cover{background:var(--ink);color:var(--paper);font-style:normal;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.24em;text-transform:uppercase;outline:1px solid var(--paper);outline-offset:-8px}
.off-menu{margin-top:12px;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.off-menu s{color:var(--accent);text-decoration-thickness:2px}

/* coin */
.coin-wrap{margin-top:26px;text-align:center}
.coin-toss{perspective:700px;width:136px;height:136px;margin:18px auto 14px}
.coin-toss.up{animation:toss 1.6s cubic-bezier(.3,.6,.4,1)}
@keyframes toss{45%{transform:translateY(-64px) scale(1.16)}}
.coin{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:transform 1.6s cubic-bezier(.2,.7,.2,1);-webkit-tap-highlight-color:transparent}
.coin-face{position:absolute;inset:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:2px solid var(--ink);outline:1px solid var(--ink);outline-offset:-8px;background:radial-gradient(circle at 34% 28%,#fffdf6,#e9dfc9 68%,#cfc3a6);box-shadow:0 8px 16px rgba(27,25,21,.28);font-family:var(--sans);text-transform:uppercase;color:var(--ink)}
.coin-face small{font-size:9px;font-weight:800;letter-spacing:.2em}
.coin-face b{font-family:var(--head);font-weight:900;font-size:30px;line-height:1;letter-spacing:.02em}
.coin-a{transform:rotateX(0deg)}
.coin-b{transform:rotateX(180deg)}
.coin-b b{color:var(--accent)}
.coin-cap{font-family:var(--head);font-style:italic;font-weight:700;font-size:17px;line-height:1.35;min-height:4.1em;max-width:340px;margin:0 auto}

/* the cycle */
.wheel-box{margin-top:26px;text-align:center}
.wheel{position:relative;width:min(100%,320px);aspect-ratio:1;margin:12px auto 10px}
.wheel svg{width:100%;height:100%}
.ring{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:3 6;transition:opacity .6s}
.arrows{fill:var(--ink);transition:opacity .6s}
.runner{fill:var(--accent);stroke:var(--paper);stroke-width:3}
.wheel.off .ring,.wheel.off .arrows{opacity:.22}
.wheel.off .runner{opacity:0}
.node{position:absolute;transform:translate(-50%,-50%);background:var(--paper);border:1.5px solid var(--ink);padding:5px 8px;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .2s,color .2s,opacity .6s}
.node.hot{background:var(--accent);border-color:var(--accent);color:#fff}
.wheel.off .node{opacity:.3}
.n0{left:50%;top:14%}.n1{left:86%;top:50%}.n2{left:50%;top:86%}.n3{left:14%;top:50%}
.wheel-mid{position:absolute;inset:26%;display:flex;align-items:center;justify-content:center;text-align:center}
.wm-loop{font-family:var(--head);font-style:italic;font-weight:700;font-size:18px;line-height:1.15;transition:opacity .4s}
.wm-cup{position:absolute;inset:-8% 0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:scale(.6);transition:opacity .5s,transform .6s cubic-bezier(.2,1.5,.4,1);pointer-events:none}
.wm-cup svg{width:52px;height:auto;margin-bottom:5px;fill:#fffdf6;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round}
.wm-cup .sleeve{fill:#c9a877}.wm-cup .dot{fill:#1e6b4a;stroke:none}
.wm-cup .steam{fill:none;stroke-width:2;stroke-linecap:round;opacity:.55;animation:steam 2.2s ease-in-out infinite}
.wm-cup .s2{animation-delay:.4s}.wm-cup .s3{animation-delay:.8s}
@keyframes steam{50%{transform:translateY(-3px);opacity:.15}}
.wm-cup b{font-family:var(--sans);font-weight:800;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.wm-cup em{font-family:var(--head);font-weight:700;font-size:17px;color:var(--accent)}
.wheel.off .wm-loop{opacity:0}
.wheel.off .wm-cup{opacity:1;transform:scale(1)}

.readouts{display:grid;grid-template-columns:1fr 1fr;max-width:320px;margin:0 auto 14px;border:1.5px solid var(--ink)}
.readouts.three{grid-template-columns:repeat(3,1fr)}
.readouts div{padding:9px 4px 8px;border-right:1px solid var(--ink)}
.readouts div:last-child{border-right:0}
.readouts b{display:block;font-family:var(--sans);font-weight:800;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.readouts span{display:block;margin-top:5px;font-family:var(--sans);font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}

/* tic tac toe */
#sports{text-align:center}
#sports .kicker{justify-content:center}
.ttt{display:grid;grid-template-columns:repeat(3,1fr);width:min(100%,290px);margin:18px auto 12px}
.cell{-webkit-appearance:none;appearance:none;aspect-ratio:1;padding:0;border:0;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);border-radius:0;background:none;display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:900;font-size:clamp(40px,13vw,56px);line-height:1;color:var(--ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cell:nth-child(3n){border-right:0}.cell:nth-child(n+7){border-bottom:0}
.cell span{display:block;animation:pop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.2);opacity:0}}
.cell.o{color:var(--accent)}
.cell.win{background:rgba(163,32,28,.13)}
.cell:disabled{cursor:default}
.ttt-status{font-family:var(--head);font-style:italic;font-weight:700;font-size:17.5px;line-height:1.3;min-height:2.7em;max-width:340px;margin:0 auto 12px}
.flash{animation:flash 1s ease 2}
@keyframes flash{50%{color:var(--accent)}}

/* classifieds */
.ads{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-left:1px solid var(--ink);margin-top:16px}
.ad{padding:11px 11px 13px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:14.5px;line-height:1.4}
.ad h3{font-family:var(--sans);font-weight:800;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
.ad:nth-child(4n+2),.ad:nth-child(4n+3){background:rgba(27,25,21,.05)}
.nominate{margin-top:24px;border:2px solid var(--ink);padding:18px 14px 16px;background:var(--card);scroll-margin-top:56px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 12px}
.chip{-webkit-appearance:none;appearance:none;border:1.5px solid var(--ink);border-radius:999px;background:transparent;padding:9px 13px;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--ink);cursor:pointer;touch-action:manipulation;transition:background .15s,color .15s,opacity .2s;-webkit-tap-highlight-color:transparent}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip:disabled{opacity:.3;cursor:default}
.own{display:flex;gap:8px;margin-bottom:14px}
.own input{flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--ink);border-radius:0;background:transparent;font-family:var(--body);font-size:17px;color:var(--ink);padding:8px 2px}
.own input:focus{outline:none;border-bottom-color:var(--accent)}
.own .btn{padding:10px 14px}
.msg{border:1px dashed var(--ink);background:var(--paper);padding:13px;font-size:17px;line-height:1.45;min-height:5.2em;margin-bottom:12px}
.msg.empty{color:var(--ink-soft);font-style:italic}
.nominate .btn-red{width:100%}

/* links, letter, footer */
.links{display:grid;gap:8px;margin-top:18px}
.link{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1.5px solid var(--ink);padding:14px;text-decoration:none;font-family:var(--sans);font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;background:var(--card)}
.link small{display:block;margin-top:2px;font-weight:500;font-size:13.5px;letter-spacing:.01em;text-transform:none;color:var(--ink-soft)}
.link::after{content:"\2197";font-size:17px}
button.link{-webkit-appearance:none;appearance:none;width:100%;border-radius:0;color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.link-copy small{font-size:16px;color:var(--ink);letter-spacing:.02em}
.link-copy::after{content:"Tap to copy";font-size:9.5px;letter-spacing:.14em;color:var(--accent);white-space:nowrap}
.ps{font-style:italic}
.signoff{margin:20px 0 18px;font-family:var(--head);font-weight:700;font-size:20px}
.signoff em{display:block;margin-top:2px;font-size:40px;font-weight:700;line-height:1.1}
.corrections{padding:16px 0;border-bottom:1px solid var(--ink);font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.corrections b{font-family:var(--sans);font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-right:6px}
.foot{padding:18px 0 0;text-align:center;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.09em;line-height:1.7;text-transform:uppercase;color:var(--ink-soft)}
.foot a{color:var(--ink)}
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:95;width:max-content;max-width:min(92vw,420px);padding:13px 16px;background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.4;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,20px);transition:opacity .35s,transform .35s;pointer-events:none}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- wider screens: a real broadsheet grid ---------- */
@media (min-width:720px){
  .desk{padding:28px 20px 64px}
  .paper{--gut:36px;padding-bottom:48px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
  body{font-size:18px}
  .mast-title{font-size:clamp(60px,12.4vw,104px)}
}
@media (min-width:900px){
  .ears{grid-template-columns:190px 1fr 190px;grid-template-areas:"l t r";align-items:center}
  .mast-title{font-size:clamp(56px,calc((100vw - 520px) / 6.6),98px);white-space:nowrap}
  .index-links{justify-content:center}
  .grid{display:grid;grid-template-columns:repeat(12,1fr)}
  .g5{grid-column:span 5}.g6{grid-column:span 6}.g7{grid-column:span 7}
  .col-l{padding-right:30px}
  .col-r{padding-left:30px;border-left:1px solid var(--ink)}
  .night{margin:0;padding:70px 28px 34px;border-bottom:1px solid var(--ink)}
  .photo{float:right;width:45%;margin:4px 0 14px 24px}
  .lead .pull{clear:both}
  .copy{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
  .night .copy{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .wm-cup .steam,.cell span,.flash{animation:none}
}