@import url("tokens.css");
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--c-paper);color:var(--c-ink)}
body{font-family:var(--font-mono);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);overflow-x:hidden}
p{max-width:var(--measure)}
:focus-visible{outline:var(--rule) solid var(--c-ink);outline-offset:var(--rule);box-shadow:0 0 0 var(--s-1) var(--c-paper)}
.skip{position:absolute;left:-999px;top:0;background:var(--c-ink);color:var(--c-paper);padding:var(--s-1) var(--s-2);z-index:10}
.skip:focus{left:var(--s-2);top:var(--s-2)}

/* component: rule */
.rule-b{border-bottom:var(--rule) solid var(--c-ink)}
.rule-t{border-top:var(--rule) solid var(--c-ink)}

/* component: label */
.label{font-size:var(--fs-label);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:var(--s-2)}
.label--inverse{background:var(--c-ink);color:var(--c-paper);padding:calc(var(--u)/4) var(--s-1);margin:0}
.label--ruled{display:inline-block;border-bottom:var(--rule-thin) solid currentColor;padding-bottom:calc(var(--u)/2)}

/* component: chip (skewed solid stamp, a label, never actionable) */
.chip{display:inline-block;background:var(--c-ink);color:var(--c-paper);border:0;cursor:default;user-select:none;pointer-events:none;padding:calc(var(--u)/4) var(--s-1);text-transform:uppercase;letter-spacing:var(--ls-label);font-weight:var(--fw-strong);font-size:var(--fs-label);transform:skewX(var(--a-skew))}

/* component: block */
.block{border:var(--rule) solid var(--c-ink);padding:clamp(var(--s-2),2.6vw,var(--s-4));margin:calc(var(--rule) / -2);background:var(--c-paper)}
.block--ink{background:var(--c-ink);color:var(--c-paper)}

/* component: angled panel */
.panel-skew{transform:skewY(var(--a-panel));transform-origin:right}
.panel-skew > *{transform:skewY(calc(var(--a-panel) * -1))}
.panel-cut{clip-path:polygon(0 0,100% 0,100% 100%,var(--cut-panel) 100%)}
.panel-cut > *{padding-left:calc(var(--cut-panel) * .6)}

.sub{margin-top:var(--s-3)}
.head{font-size:var(--fs-head);font-weight:var(--fw-heavy);line-height:var(--lh-head);letter-spacing:-.02em;margin-bottom:var(--s-2);max-width:18ch}

/* layout */
.top{display:flex;justify-content:space-between;align-items:center;padding:var(--s-2) var(--gutter)}
.mark{font-weight:var(--fw-strong)}
.mark sup{font-size:.7em}

.hero{position:relative;background:var(--c-ink);color:var(--c-paper);padding:clamp(var(--s-6),9vw,var(--s-12)) var(--gutter) clamp(var(--s-12),14vw,calc(var(--s-12)*2));
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut-hero)),0 100%);overflow:hidden}
.slab{position:absolute;right:-6vw;top:12%;width:44vw;height:44vw;max-width:560px;max-height:560px;
  border:clamp(10px,1.6vw,22px) solid var(--c-paper);transform:rotate(var(--a-slab))}
.slab-in{position:absolute;inset:18%;background:var(--c-paper);transform:rotate(calc(var(--a-slab) * -1.66))}
/* component: payment visual (inside the inner square). Text chips only, no marks */
.pay{display:block;width:100%;height:100%;overflow:visible}
.pay text{font-family:var(--font-mono);font-weight:var(--fw-heavy);fill:var(--c-ink)}
.pay-cap-bg{fill:var(--c-ink)}
.pay .pay-cap{fill:var(--c-paper);font-size:4.2px;font-weight:var(--fw-strong);letter-spacing:.18em}
.pay-in rect{fill:var(--c-paper);stroke:var(--c-ink);stroke-width:var(--pay-rule)}
.pay-in text{font-size:6.2px}
.pay-wire{stroke:var(--c-ink);stroke-width:var(--pay-wire);stroke-linecap:square}
.pay-in.is-on rect{fill:var(--c-ink)}
.pay-in.is-on text{fill:var(--c-paper)}
.pay-in.is-on .pay-wire{stroke-width:var(--pay-rule)}
.pay-shaft{stroke:var(--c-ink);stroke-width:var(--pay-rule)}
.pay-head{fill:var(--c-ink)}
.pay-shop{fill:var(--c-ink)}
.pay .pay-shop-l{fill:var(--c-paper);font-size:4.2px;font-weight:var(--fw-strong);letter-spacing:.18em}
.pay .pay-amt{fill:var(--c-paper);font-size:7.6px}
.pay-paid rect{fill:var(--c-paper)}
.pay-paid text{font-size:5.4px;letter-spacing:.12em}
.pay-paid{transform-box:fill-box;transform-origin:center;transform:rotate(var(--a-tilt))}
@media (prefers-reduced-motion:no-preference){
  .pay-in rect{animation:pay-rect var(--m-cycle) step-end infinite}
  .pay-in text{animation:pay-text var(--m-cycle) step-end infinite}
  .pay-in .pay-wire{animation:pay-wire var(--m-cycle) step-end infinite}
  .pay .pay-in-1 > *{animation-delay:calc(var(--m-frame) * -5)}
  .pay .pay-in-2 > *{animation-delay:calc(var(--m-frame) * -4)}
  .pay .pay-in-3 > *{animation-delay:calc(var(--m-frame) * -3)}
  .pay .pay-in-4 > *{animation-delay:calc(var(--m-frame) * -2)}
  .pay .pay-in-5 > *{animation-delay:calc(var(--m-frame) * -1)}
  .pay-paid{animation:pay-stamp var(--m-frame) step-end infinite}
}
@keyframes pay-rect{0%{fill:var(--c-ink)}20%,100%{fill:var(--c-paper)}}
@keyframes pay-text{0%{fill:var(--c-paper)}20%,100%{fill:var(--c-ink)}}
@keyframes pay-wire{0%{stroke-width:var(--pay-rule)}20%,100%{stroke-width:var(--pay-wire)}}
@keyframes pay-stamp{0%{visibility:hidden}45%,100%{visibility:visible}}
.hero h1{position:relative;margin:0}
/* component: cube logo */
.logo{display:block;width:min(100%,720px);height:auto;overflow:visible}
.logo text{font-family:var(--font-mono);font-weight:var(--fw-heavy);font-size:84px;fill:var(--c-ink)}
.cube{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .cube{animation:cube-drop var(--m-drop) steps(var(--m-step),end) both}
  .cube-2{animation-delay:calc(var(--m-stagger) * 1)}
  .cube-3{animation-delay:calc(var(--m-stagger) * 2)}
  .cube-4{animation-delay:calc(var(--m-stagger) * 3)}
  .logo:hover .cube{animation:cube-hop var(--m-drop) steps(2,end)}
  .logo:hover .cube-2{animation-delay:calc(var(--m-stagger) * .5)}
  .logo:hover .cube-3{animation-delay:calc(var(--m-stagger) * 1)}
  .logo:hover .cube-4{animation-delay:calc(var(--m-stagger) * 1.5)}
}
@keyframes cube-drop{from{transform:translateY(-160px);opacity:0}1%{opacity:1}to{transform:none;opacity:1}}
@keyframes cube-hop{50%{transform:translateY(-18px)}}
.tag{position:relative;display:inline-block;margin-top:var(--s-3);background:var(--c-paper);color:var(--c-ink);padding:calc(var(--u)/2) var(--s-2);
  font-weight:var(--fw-strong);text-transform:uppercase;letter-spacing:.14em;font-size:clamp(.8rem,1.6vw,1rem);transform:rotate(var(--a-tilt));transform-origin:left}
.offer{position:relative;margin-top:var(--s-4);font-size:var(--fs-lead);line-height:1.25;max-width:24ch;font-weight:600}

.status{display:flex;flex-wrap:wrap;gap:var(--s-1) var(--s-3);align-items:baseline;margin:calc(var(--s-6) * -1) var(--gutter) 0;position:relative;
  background:var(--c-paper);border:var(--rule) solid var(--c-ink);padding:var(--s-2) var(--s-3);transform:rotate(var(--a-bar));max-width:820px;box-shadow:var(--shadow-accent)}
.status p{max-width:none;font-weight:var(--fw-strong);font-size:clamp(1.05rem,1.8vw,1.35rem)}
.status a{color:inherit;text-decoration:underline;text-decoration-thickness:var(--rule-thin);text-underline-offset:.18em}
.status a:hover{text-decoration-thickness:var(--rule)}
.status a:focus-visible{outline:var(--rule) solid var(--c-ink);outline-offset:var(--rule-thin);box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);padding:clamp(var(--s-8),8vw,var(--s-12)) var(--gutter) clamp(var(--s-6),6vw,var(--s-8))}
.g-for{grid-column:1 / span 3}
.g-free{grid-column:4 / span 3;grid-row:1 / span 2}
.g-cost{grid-column:1 / span 3}
.g-rules{grid-column:1 / span 4}
.g-edges{grid-column:5 / span 2}

/* component: stories hub (a feed of angled cards, newest first) */
.stories{padding:0 var(--gutter) clamp(var(--s-6),6vw,var(--s-8));max-width:calc(820px + var(--gutter) * 2)}
.stories-top{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-1) var(--s-3);margin-bottom:var(--s-3)}
.stories-order{font-size:var(--fs-label);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;border-bottom:var(--rule-thin) solid var(--c-ink);padding-bottom:calc(var(--u)/2)}
.stories-empty{font-size:var(--fs-head);font-weight:var(--fw-heavy);line-height:var(--lh-head);letter-spacing:-.02em;max-width:26ch;margin-bottom:var(--s-6)}
.feed{list-style:none;border-left:var(--rule) solid var(--c-ink);padding:var(--s-1) 0 var(--s-1) var(--s-4);display:grid;gap:var(--s-6)}
.feed-item{position:relative}
.feed-item::before{content:"";position:absolute;left:calc(var(--s-4) * -1 - var(--rule) * 1.5 - var(--s-1));top:var(--s-3);width:calc(var(--s-2) + var(--rule));height:calc(var(--s-2) + var(--rule));background:var(--c-ink);transform:rotate(var(--a-slab))}
.story{border:var(--rule) solid var(--c-ink);background:var(--c-paper);padding:var(--s-3);box-shadow:var(--shadow-hard);transform:rotate(var(--a-bar))}
.feed-item:nth-child(even) .story{transform:rotate(calc(var(--a-bar) * -1))}
.story-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s-1) var(--s-2);margin-bottom:var(--s-3)}
.story-date{font-weight:var(--fw-strong);letter-spacing:.08em;font-size:var(--fs-label);border:var(--rule-chip) solid var(--c-ink);padding:calc(var(--u)/4) var(--s-1);transform:skewX(var(--a-skew))}
.story-fields{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-2) var(--s-3)}
.story-fields > div{border-top:var(--rule-thin) solid var(--c-ink);padding-top:var(--s-1)}
.story-fields dt{font-size:var(--fs-label);font-weight:var(--fw-strong);letter-spacing:var(--ls-label);text-transform:uppercase;margin-bottom:calc(var(--u)/2)}
.story-fields dd{font-weight:var(--fw-strong)}
.story--example .story-fields dd{font-weight:var(--fw-body);font-style:italic}

.foot{padding:var(--s-3) var(--gutter);display:flex;justify-content:flex-end}
.foot p{font-weight:var(--fw-strong);transform:skewX(var(--a-skew));display:flex;align-items:baseline;gap:.5ch}
.foot .foot-q{font-weight:400;font-size:var(--fs-label);text-transform:none;letter-spacing:0}

/* below 1100px the logo would cover the slab, so the slab carries the payment visual in its own room under the copy */
@media (max-width:1100px){
  .hero{padding-bottom:calc(var(--slab-m) + var(--cut-hero) + var(--slab-m) * .13 + var(--s-4) + var(--s-6))}
  .slab{width:var(--slab-m);height:var(--slab-m);right:0;top:auto;bottom:calc(var(--cut-hero) + var(--slab-m) * .13 + var(--s-4))}
}
@media (max-width:720px){
  .grid{grid-template-columns:1fr;gap:var(--s-3)}
  .grid > *{grid-column:1;grid-row:auto;margin:0}
  .status{margin-top:calc(var(--s-4) * -1)}
  .foot{justify-content:flex-start}
  .story-fields{grid-template-columns:1fr}
  .story{padding:var(--s-2)}
  .feed{padding-left:var(--s-3)}
  .feed-item::before{left:calc(var(--s-3) * -1 - var(--rule) * 1.5 - var(--s-1))}
  .tag{white-space:nowrap;letter-spacing:.08em;font-size:.72rem}
}

.foot a.mark{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.foot a.mark:hover{background:var(--c-ink);color:var(--c-paper);text-decoration:none}