@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url("/fonts/Montserrat-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/Lora-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/Lora-italic-variable.woff2") format("woff2");
}

:root{
  --crimson:#A51C30;
  --ink:#1E1E1E;
  --ink-soft:#414141;
  --ink-mute:#6c6c6c;
  --parchment:#F3F3F1;
  --saffron:#D16103;
  --line:#dfdfdf;
  --block:#fafafa;
  --r:4px;
  --sans:"Montserrat", Arial, Helvetica, sans-serif;
  --serif:"Lora", Georgia, serif;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--serif); line-height:1.4;
  display:flex; flex-direction:column; overflow:hidden;
}

header{
  display:flex; align-items:baseline; gap:2.2vw;
  background:var(--crimson); color:#fff; padding:1.6vh 2.4vw;
}
.brand{font-family:var(--sans); font-size:clamp(18px,2.2vw,34px); letter-spacing:.04em}
.brand__veri{font-weight:800}
.brand__taste{font-weight:500; opacity:.85}
.title{flex:1; font-family:var(--sans); font-weight:600;
  font-size:clamp(18px,2.2vw,34px)}
.clock{font-family:var(--sans); font-weight:600;
  font-size:clamp(18px,2.2vw,34px); font-variant-numeric:tabular-nums}

.stale{
  font-family:var(--sans); font-weight:600;
  font-size:clamp(16px,1.8vw,26px); color:var(--ink-soft);
  background:var(--block); border-left:.5vw solid var(--saffron);
  padding:1.2vh 2.4vw;
}

main{flex:1; overflow:hidden; padding:2.4vh 2.4vw; position:relative; z-index:1;
  display:grid; grid-template-columns:1fr minmax(260px,26vw); gap:2.4vw;
  align-items:start}
#list{overflow:hidden; min-width:0; height:100%}
@media (max-width:820px){
  main{grid-template-columns:1fr}
  #demand{order:-1}
}

#demand{border:1px solid var(--line); border-radius:var(--r); background:#fff;
  padding:2.4vh 1.6vw}
.tile__label{font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:clamp(13px,1.3vw,20px); color:var(--ink-mute)}
.tile__big{font-family:var(--sans); font-weight:800;
  font-size:clamp(44px,6.4vw,104px); line-height:1.05; margin-top:1vh;
  font-variant-numeric:tabular-nums}
.tile__word{font-size:clamp(16px,1.8vw,28px); font-weight:600;
  margin-left:.7vw; color:var(--ink-soft)}
.tile__no{font-family:var(--sans); font-weight:600; color:var(--ink-mute);
  font-size:clamp(18px,2vw,32px); margin-top:.6vh}
.tile__cutoff{font-family:var(--serif); font-style:italic; color:var(--ink-mute);
  font-size:clamp(14px,1.5vw,24px); margin-top:1.6vh;
  border-top:1px solid var(--line); padding-top:1.4vh}
.tile__na{font-family:var(--serif); font-style:italic; color:var(--ink-mute);
  font-size:clamp(15px,1.7vw,26px); margin-top:1vh}

.rows{display:flex; flex-direction:column}
.row{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.6vw;
  align-items:baseline; padding:1.6vh 0; border-bottom:1px solid var(--line);
}
.tag{
  font-family:var(--sans); font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:clamp(14px,1.5vw,24px);
  padding:.4vh .9vw; border-radius:var(--r); align-self:center;
  min-width:4.6vw; text-align:center;
}

.tag.out{background:var(--ink); color:#fff; border:1px solid var(--ink)}
.tag.low{background:#fff; color:var(--saffron); border:1px solid var(--saffron)}
.name{font-family:var(--sans); font-weight:600; font-size:clamp(24px,3.2vw,52px)}
.note{
  grid-column:2; font-family:var(--serif); font-style:italic;
  color:var(--ink-mute); font-size:clamp(16px,1.9vw,30px); margin-top:.4vh;
}

.allgood{height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:1.6vh}
.allgood__line{font-family:var(--serif); font-size:clamp(28px,3.6vw,58px)}
.allgood__sub{font-family:var(--sans); color:var(--ink-mute);
  font-size:clamp(15px,1.6vw,24px); max-width:60ch}

.mark86{
  position:fixed; right:-2vw; bottom:-6vh; z-index:0;
  font-family:var(--sans); font-weight:800; font-size:46vh; line-height:.8;
  letter-spacing:-.04em; color:var(--ink); opacity:.05;
  transform:rotate(-7deg); pointer-events:none; user-select:none;
}

footer{
  font-family:var(--sans); font-size:clamp(11px,1vw,15px);
  color:var(--ink-mute); padding:1vh 2.4vw; position:relative; z-index:1;
}