/* the DTC beef storefront
   Aesthetic: an agricultural record book. Hairline rules, tabular data, every
   number set in mono and visible. Flat bordered blocks, never floating cards --
   the design argument is that nothing here is dressed up. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit}

:root{
  --rule: color-mix(in srgb, var(--charcoal) 18%, transparent);
  --rule-strong: color-mix(in srgb, var(--charcoal) 34%, transparent);
  --muted: color-mix(in srgb, var(--charcoal) 62%, transparent);
  --tint: color-mix(in srgb, var(--charcoal) 4%, var(--cream));
  --tint-warm: color-mix(in srgb, var(--wheat) 16%, var(--cream));

  --display: "Newsreader", Georgia, "Times New Roman", serif;
  --text: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gutter: 1.25rem;
  --maxw: 1180px;
}

body{
  background: var(--cream);
  color: var(--charcoal);
  font-family: var(--text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Paper grain. Cheap, inline, and it does more for the "printed record" feel
   than any amount of drop shadow would. */
.grain{
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,.display{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.015em}
h1{font-size:clamp(2.5rem,9vw,5.25rem)}
h2{font-size:clamp(1.75rem,5vw,2.75rem)}
h3{font-size:clamp(1.25rem,3vw,1.6rem);line-height:1.15}

.label{
  font-family:var(--data);font-size:.6875rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
  margin:0 0 .5rem;
}
.data{font-family:var(--data);font-variant-numeric:tabular-nums}
.lede{font-size:clamp(1.0625rem,2vw,1.25rem);max-width:60ch;color:var(--muted)}
.serif-note{font-family:var(--display);font-style:italic;font-size:1.125rem;color:var(--muted)}

a{text-decoration-thickness:1px;text-underline-offset:.18em}
main a:not(.btn):not(.card):not(.chip):not(.ledger__row){text-decoration-color:var(--rule-strong)}
main a:not(.btn):hover{text-decoration-color:var(--ranch-red);color:var(--ranch-red)}

/* --------------------------------------------------------- concept bar --- */

.concept-bar{background:var(--charcoal);color:var(--cream)}
.concept-bar .wrap{display:flex;gap:.75rem;align-items:baseline;padding-block:.5rem;flex-wrap:wrap}
.concept-bar__tag{
  font-family:var(--data);font-size:.625rem;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;border:1px solid color-mix(in srgb,var(--cream) 45%,transparent);
  padding:.1rem .4rem;flex:none;
}
.concept-bar__text{font-size:.8125rem;line-height:1.4;opacity:.86}

/* ----------------------------------------------------------- masthead --- */

.masthead{border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--cream) 92%,transparent);backdrop-filter:blur(8px)}
.masthead__inner{display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-block:.875rem;flex-wrap:wrap}
.wordmark{text-decoration:none;display:flex;flex-direction:column;line-height:1}
.wordmark__name{font-family:var(--display);font-weight:600;font-size:1.5rem;letter-spacing:-.02em}
.wordmark__rest{font-family:var(--data);font-size:.625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-top:.2rem}
.nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}
.nav a{font-size:.875rem;text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:border-color .18s,color .18s}
.nav a:hover{border-bottom-color:var(--ranch-red);color:var(--ranch-red)}
.nav__cart{font-family:var(--data);font-size:.8125rem !important;
  border:1px solid var(--rule-strong) !important;padding:.25rem .6rem !important}
.nav__cart:hover{background:var(--charcoal);color:var(--cream) !important;border-color:var(--charcoal) !important}

/* --------------------------------------------------------------- hero --- */

.hero{padding-block:clamp(2.5rem,7vw,5rem) clamp(2rem,5vw,3.5rem);
  border-bottom:1px solid var(--rule)}
.hero__grid{display:grid;gap:2.5rem}
.hero h1{margin-bottom:1.25rem}
.hero h1 em{font-style:italic;color:var(--ranch-red)}
.hero__sub{max-width:46ch;font-size:1.0625rem;color:var(--muted);margin-bottom:1.75rem}
.hero__actions{display:flex;gap:.75rem;flex-wrap:wrap}

.btn{display:inline-block;font-family:var(--data);font-size:.8125rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:.7rem 1.2rem;border:1px solid var(--charcoal);transition:.18s}
.btn--solid{background:var(--charcoal);color:var(--cream)}
.btn--solid:hover{background:var(--ranch-red);border-color:var(--ranch-red);color:var(--cream)}
.btn--ghost:hover{background:var(--charcoal);color:var(--cream)}

/* current-lot card, deliberately offset from the headline column */
.lotcard{border:1px solid var(--charcoal);background:var(--tint-warm);padding:1.25rem}
.lotcard__head{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;border-bottom:1px solid var(--rule-strong);padding-bottom:.6rem;margin-bottom:.9rem}
.lotcard__code{font-family:var(--data);font-size:1.5rem;font-weight:500;letter-spacing:-.02em}
.lotcard dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .9rem;margin:0}
.lotcard dt{font-family:var(--data);font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);align-self:center}
.lotcard dd{margin:0;font-size:.9375rem;text-align:right;font-family:var(--data)}
.lotcard__foot{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--rule-strong)}

/* ------------------------------------------------------------- ledger --- */
/* A 1px grid gap over a rule-coloured background gives true hairline rules
   between cells, which is what a printed table actually looks like. */

.section{padding-block:clamp(2.5rem,6vw,4.5rem);border-bottom:1px solid var(--rule)}
.section__head{margin-bottom:2rem;max-width:64ch}
.section__head h2{margin-bottom:.6rem}

/* Borders on the cells rather than a gap over a coloured container, so a row
   that doesn't fill leaves empty paper instead of a phantom grey cell. */
.ledger{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule);
  margin-top:1.5rem}
.ledger--2{grid-template-columns:1fr}
.ledger--3{grid-template-columns:1fr}

.card{background:var(--cream);padding:1.25rem;text-decoration:none;display:flex;
  flex-direction:column;gap:.75rem;position:relative;transition:background .18s;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:0;
  background:var(--ranch-red);transition:width .18s}
.card:hover{background:var(--tint)}
.card:hover::before{width:3px}
.card__name{font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.1}
.card__blurb{font-size:.9375rem;color:var(--muted);flex:1}
.card__contents{font-family:var(--data);font-size:.75rem;color:var(--muted);line-height:1.7}
.card__figures{display:flex;justify-content:space-between;align-items:baseline;
  gap:1rem;border-top:1px solid var(--rule);padding-top:.7rem;font-family:var(--data)}
.card__price{font-size:1.125rem;font-weight:500}
.card__perlb{font-size:.75rem;color:var(--muted)}
.card__weight{font-size:.8125rem}

.chip{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--data);
  font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.2rem .5rem;border:1px solid var(--rule-strong);background:var(--tint-warm);
  text-decoration:none;align-self:flex-start}
.chip:hover{background:var(--wheat);border-color:var(--charcoal)}
.chip--flat{background:transparent}
.chip--green{background:color-mix(in srgb,var(--pasture-green) 14%,var(--cream));
  border-color:color-mix(in srgb,var(--pasture-green) 45%,transparent)}

/* ------------------------------------------------------------ promises --- */

.promises{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.promise{background:var(--cream);padding:1.5rem 1.25rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.promise__n{font-family:var(--data);font-size:.6875rem;letter-spacing:.14em;
  color:var(--ranch-red);display:block;margin-bottom:.6rem}
.promise h3{margin-bottom:.5rem;font-size:1.1875rem}
.promise p{font-size:.9375rem;color:var(--muted)}

/* ------------------------------------------------------------- product --- */

.product{display:grid;gap:2.5rem;padding-block:clamp(2rem,5vw,3.5rem)}
.product__figure{border:1px solid var(--rule);background:var(--tint)}
.product h1{font-size:clamp(2rem,6vw,3.25rem);margin-bottom:.75rem}
.spec{width:100%;border-collapse:collapse;margin-block:1.5rem;font-family:var(--data);font-size:.875rem}
.spec th,.spec td{text-align:left;padding:.6rem 0;border-bottom:1px solid var(--rule);vertical-align:baseline}
.spec th{font-weight:500;font-size:.6875rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);width:42%}
.spec td{text-align:right;font-variant-numeric:tabular-nums}
.bigprice{display:flex;align-items:baseline;gap:.75rem;margin-block:1.25rem}
.bigprice__n{font-family:var(--data);font-size:2.25rem;font-weight:500;letter-spacing:-.02em}
.bigprice__per{font-family:var(--data);font-size:.875rem;color:var(--muted)}
.contents-list{border:1px solid var(--rule);margin-block:1.25rem}
.contents-list li{display:flex;justify-content:space-between;gap:1rem;
  padding:.6rem .9rem;border-bottom:1px solid var(--rule);font-size:.9375rem}
.contents-list li:last-child{border-bottom:0}
.contents-list .qty{font-family:var(--data);color:var(--muted);font-size:.8125rem}
.nosub{font-size:.875rem;color:var(--muted);border-left:2px solid var(--ranch-red);padding-left:.85rem}

/* --------------------------------------------------------------- trace --- */

.trace__hero{padding-block:clamp(2rem,6vw,3.5rem);border-bottom:1px solid var(--rule)}
.trace__code{font-family:var(--data);font-size:clamp(2.5rem,10vw,5rem);
  font-weight:500;letter-spacing:-.03em;line-height:1}
.depthbar{display:flex;border:1px solid var(--rule);border-right:0;margin-top:1.5rem}
.depthbar__step{background:var(--cream);flex:1;padding:.7rem .8rem;font-family:var(--data);
  border-right:1px solid var(--rule);
  font-size:.6875rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);text-align:center}
.depthbar__step[data-on="true"]{background:var(--charcoal);color:var(--cream)}

.timeline{position:relative;margin-top:2.5rem;padding-left:1.75rem}
.timeline::before{content:"";position:absolute;left:5px;top:.55rem;bottom:.55rem;
  width:1px;background:var(--rule-strong)}
.tl{position:relative;padding-bottom:2.25rem}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-1.75rem;top:.4rem;width:11px;height:11px;
  background:var(--cream);border:1px solid var(--charcoal)}
.tl[data-actor="processor"]::before{background:var(--charcoal)}
.tl__actor{font-family:var(--data);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:.3rem}
.tl h3{margin-bottom:.4rem}
.tl p{font-size:.9375rem;color:var(--muted);max-width:56ch}
.tl__meta{font-family:var(--data);font-size:.8125rem;margin-top:.5rem}

.animals{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-top:1rem}
.animal{background:var(--cream);padding:.6rem .7rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.animal__tag{font-family:var(--data);font-size:1rem;font-weight:500}
.animal__meta{font-size:.6875rem;color:var(--muted);line-height:1.4}

.gapnote{border:1px solid var(--rule-strong);background:var(--tint-warm);
  padding:1.1rem 1.25rem;margin-top:1.5rem;max-width:62ch}
.gapnote .label{color:var(--ranch-red)}

/* ---------------------------------------------------------- one animal --- */

.flow{display:grid;border-top:1px solid var(--rule);border-left:1px solid var(--rule);margin-block:2rem}
.flow__step{background:var(--cream);padding:1.1rem 1.25rem;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.flow__n{font-family:var(--data);font-size:1.75rem;font-weight:500;letter-spacing:-.02em;display:block}
.flow__bar{height:6px;background:var(--charcoal);margin-top:.7rem}

.yield-row{display:grid;grid-template-columns:1fr;gap:.4rem;padding-block:1rem;
  border-bottom:1px solid var(--rule)}
.yield-row:last-child{border-bottom:0}
.yield-row__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.yield-row__name{font-family:var(--display);font-size:1.125rem;font-weight:600}
.yield-row__figs{font-family:var(--data);font-size:.8125rem;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.bar{height:22px;background:var(--tint);border:1px solid var(--rule);position:relative;overflow:hidden}
.bar__fill{height:100%;background:var(--charcoal);position:relative}
.bar__ground{position:absolute;inset:0 0 0 auto;background:repeating-linear-gradient(
  45deg,transparent,transparent 3px,color-mix(in srgb,var(--cream) 55%,transparent) 3px,
  color-mix(in srgb,var(--cream) 55%,transparent) 6px)}
.yield-row__used{font-family:var(--data);font-size:.75rem;color:var(--muted)}
.yield-row__used a{color:var(--ranch-red)}
.yield-row[data-unused="true"] .bar__fill{background:var(--ranch-red)}

.callout{border:1px solid var(--charcoal);padding:1.5rem;margin-block:2rem;background:var(--tint-warm)}
.callout p{max-width:62ch}
.est{font-family:var(--data);font-size:.75rem;color:var(--ranch-red);
  border:1px solid currentColor;padding:.15rem .45rem;display:inline-block;
  text-transform:uppercase;letter-spacing:.1em}

/* ---------------------------------------------------------------- cart --- */

.cartline{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.cartline__name{font-family:var(--display);font-size:1.125rem;font-weight:600}
.cartline__meta{font-family:var(--data);font-size:.75rem;color:var(--muted)}
.cartline__right{font-family:var(--data);text-align:right;font-variant-numeric:tabular-nums}
.cart-empty{color:var(--muted);padding-block:2rem}
.qtybtn{font-family:var(--data);border:1px solid var(--rule-strong);background:none;
  cursor:pointer;padding:.1rem .45rem;font-size:.875rem;color:inherit}
.qtybtn:hover{background:var(--charcoal);color:var(--cream)}
.cart-total{display:flex;justify-content:space-between;padding-top:1rem;
  font-family:var(--data);font-size:1.25rem;font-weight:500}

/* -------------------------------------------------------------- footer --- */

.footer{background:var(--charcoal);color:var(--cream);padding-block:3rem 1.5rem;margin-top:0}
.footer a{color:inherit;text-decoration:none;display:block;font-size:.875rem;
  opacity:.78;padding-block:.15rem}
.footer a:hover{opacity:1;color:var(--wheat)}
.footer .label{color:color-mix(in srgb,var(--cream) 55%,transparent)}
.footer__inner{display:grid;gap:2.5rem}
.footer__mark{font-family:var(--display);font-size:1.75rem;font-weight:600}
.footer__promise{font-family:var(--display);font-style:italic;opacity:.72;margin-top:.3rem}
.footer__cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem}
.footer__contact{font-size:.875rem;opacity:.78;line-height:1.6}
.footer__fine{margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid color-mix(in srgb,var(--cream) 22%,transparent)}
.footer__fine p{font-family:var(--data);font-size:.75rem;opacity:.6;max-width:70ch;line-height:1.6}

/* ----------------------------------------------------------- responsive --- */

@media (min-width:640px){
  .ledger--2{grid-template-columns:repeat(2,1fr)}
  .promises{grid-template-columns:repeat(2,1fr)}
  .yield-row{grid-template-columns:1fr;gap:.5rem}
}
@media (min-width:900px){
  :root{--gutter:2rem}
  .ledger--3{grid-template-columns:repeat(3,1fr)}
  .promises{grid-template-columns:repeat(3,1fr)}
  .hero__grid{grid-template-columns:1.55fr .9fr;align-items:end;gap:3.5rem}
  .product{grid-template-columns:1fr 1fr;gap:3.5rem;align-items:start}
  .flow{grid-template-columns:repeat(3,1fr)}
  .footer__inner{grid-template-columns:1fr 1.6fr;gap:4rem}
}

/* ------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay:calc(var(--i,0) * 70ms)}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* Phone: keep the masthead to two lines, and let the concept bar breathe
   without eating half the first screen. */
@media (max-width:639px){
  .nav{gap:.7rem;width:100%}
  .nav a{font-size:.8125rem}
  .nav__cart{margin-left:auto}
  .masthead{position:static}
  .concept-bar .wrap{padding-block:.45rem}
  .concept-bar__text{font-size:.75rem}
  .hero{padding-top:2rem}
}

/* ---------------------------------------------------- touch / Android --- */
/* He will be looking at this on an Android phone, so the touch pass is not
   optional. Two things matter: thumbs need 44px, and a fixed blended overlay
   is a scroll-jank generator on mid-range Android GPUs. */

@media (pointer:coarse){
  /* Blending a fixed full-viewport layer forces a composited repaint on every
     scroll frame. Flat opacity looks near-identical and costs nothing. */
  .grain{mix-blend-mode:normal;opacity:.16}

  a,button{-webkit-tap-highlight-color:color-mix(in srgb,var(--ranch-red) 18%,transparent);
    touch-action:manipulation}

  /* 44px minimum on everything a thumb has to hit */
  .nav a{padding-block:.6rem;min-height:44px;display:flex;align-items:center;gap:.3rem}
  .nav__cart{padding:.55rem .8rem !important}
  .footer a{padding-block:.55rem;min-height:44px;display:flex;align-items:center}
  .chip{padding:.6rem .8rem;min-height:44px}
  .btn{padding:.9rem 1.3rem}
  .qtybtn{min-width:44px;min-height:44px}
  .card{padding:1.35rem 1.25rem}
  .wordmark{padding-block:.35rem}
}

/* ------------------------------------------------------- pack cards --- */

.cards-sheet{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.packcard{border:1px solid var(--charcoal);background:var(--cream);padding:1rem;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem;
  break-inside:avoid}
.packcard__head{border-bottom:1px solid var(--rule-strong);padding-bottom:.5rem;width:100%}
.packcard__brand{font-family:var(--display);font-size:1.25rem;font-weight:600;display:block;line-height:1}
.packcard__sub{font-family:var(--data);font-size:.5625rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted)}
.packcard__qr{width:140px;height:140px}
.packcard__foot{width:100%;border-top:1px solid var(--rule-strong);padding-top:.5rem}
.packcard__lot{font-family:var(--data);font-size:1.125rem;font-weight:500;display:block}
.packcard__scan{font-size:.75rem;color:var(--muted);display:block;margin-top:.3rem;line-height:1.4}
.packcard__url{font-family:var(--data);font-size:.5625rem;color:var(--muted);
  display:block;margin-top:.4rem;word-break:break-all}

/* ------------------------------------------------------------ print --- */
/* He will want to show this to people who weren't in the room. */

@media print{
  .grain,.concept-bar,.masthead,.footer,.no-print,.hero__actions{display:none !important}
  body{background:#fff;color:#000;font-size:11pt}
  .section{padding-block:0 1rem;border-bottom:0}
  .wrap{max-width:none;padding-inline:0}
  a{text-decoration:none;color:#000}
  .card,.packcard,.callout,.gapnote,.promise,.flow__step,.yield-row{break-inside:avoid}
  .callout,.gapnote{border:1px solid #000;background:#fff}
  .spec th,.spec td{border-bottom:1px solid #ccc}
  .bar{border:1px solid #000}
  .bar__fill{background:#000}
  .cards-sheet{grid-template-columns:repeat(3,1fr);gap:.5rem}
  h1,h2{page-break-after:avoid}
  /* the URL matters on paper, since you can't click it */
  main a[href^="/"]::after{content:" (beef.corydickes.com" attr(href) ")";
    font-family:var(--data);font-size:8pt;color:#555}
  .packcard a::after,.card a::after{content:""}
}