/* FatigueShirts — storefront.
   Design language taken from the UniClub reference (see
   .design/inspiration/uniclub-analysis.md): geometric sans, oversized uppercase
   display set at negative tracking, a 1320 column, a 144px section rhythm, bare
   product images and no accent colour at all.

   Reversed onto the black field this shop already had, so the monochrome runs
   the other way up: where the reference fills a button black on white, this
   fills it cream on black. */

:root{
  --field:#0E0E0D; --card:#F4F4EE;
  --ink:#F4F4EE; --h:#E8E8E2; --body:#A9A9A2; --meta:#86867F; --muted:#6E6E68;
  --flogo:#494942; --navon:#FFFFFF;
  /* The reference rules with a hairline rather than the dashes this site used. */
  --hair:rgba(255,255,255,0.16); --hair2:rgba(255,255,255,0.10);
  --buy:#EFEFE8; --pill:#F4F4EE; --pill-ink:#0E0E0D;
  --err:#E7B7B7;
  --page:1320px; --gut:12px;
  /* One rhythm token drives every band on the page. The reference uses 144px;
     on a dark ground that reads slightly emptier, so bands are 120px with the
     big ones at 144. */
  --rhythm:120px; --rhythm-lg:144px;
  --display:'Josefin Sans','Futura','Century Gothic',sans-serif;
  --body-font:'Jost','Futura','Century Gothic',sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body-font);font-size:16px;line-height:32px;
  letter-spacing:0.26px;color:var(--body);
  background-color:var(--field);background-image:url(/assets/img/grain.png);
  background-blend-mode:soft-light;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0}
/* Display type is uppercase and tracked tight — the single most recognisable
   thing about the reference. Tracking is set in em so it holds at every size. */
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:600;line-height:1.2;
  text-transform:uppercase;letter-spacing:0.02em;color:var(--h)}
button{font-family:var(--body-font);cursor:pointer;border:0;background:none;padding:0;color:inherit}
input,select,textarea{font-family:var(--body-font);font-size:15px;color:#1A1A18}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{
  outline:2px solid var(--h);outline-offset:2px}
.disp{font-family:var(--display);font-weight:600;text-transform:uppercase}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- shell --------------------------------------------------------------- */
.page{width:var(--page);max-width:100%;margin:0 auto;padding:0 var(--gut)}
.rule{height:1px;border-top:1px solid var(--hair2)}
.glow{background:radial-gradient(110% 140% at 50% 4%,
  rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.03) 48%, rgba(255,255,255,0) 78%)}
body > .top{position:relative;padding-top:19px}
/* Section rhythm. The reference gives every band the same generous pad top and
   bottom; these two classes replace the per-view inline paddings. */
.band{padding-top:var(--rhythm)}
.band-lg{padding-top:var(--rhythm-lg)}
.band-sm{padding-top:calc(var(--rhythm) / 2)}
/* A rule draws its border at the top of the box, so padding would sit under
   the line rather than above it. On a rule the rhythm has to be margin. */
.rule.band{padding-top:0;margin-top:var(--rhythm)}

/* ---- header -------------------------------------------------------------- */
header{position:relative;z-index:3}
.util{height:60px;padding:0 10px;display:flex;align-items:center;justify-content:space-between}
.social{display:flex;gap:18px}
.social a{display:block;width:22px;height:22px}
.social svg{fill:var(--h)}
.social a:hover svg{fill:var(--navon)}
.util-links{font-size:14px;letter-spacing:0.5px;color:var(--h)}
.util-links a:hover{color:var(--navon)}
.wordmark{height:210px;display:flex;flex-direction:column;align-items:center;
  justify-content:center}
.wordmark a{line-height:0;display:block}
/* The rotating home-page logos are drawn in currentColor so one file reverses
   correctly on any ground; `color` is what they resolve against. The fixed
   wordmark has no fill of its own and still takes the `fill`. */
.wordmark svg{width:820px;height:auto;fill:var(--ink);color:var(--ink)}
/* Set against the wordmark, not with it: the body face small, tracked wide,
   with the single space opened up so the two words read as two beats.
   text-indent puts back the trailing letter-space so it stays optically centred. */
.wordmark .tag{margin-top:18px;font-family:var(--body-font);font-size:13px;line-height:16px;
  letter-spacing:0.34em;word-spacing:0.55em;text-indent:0.34em;text-transform:uppercase;
  color:var(--body)}
/* Nav follows the reference: body face, uppercase, small, widely spaced. */
.nav{padding:10px 0 16px;display:flex;justify-content:center;gap:44px}
.nav a{font-family:var(--body-font);font-size:15px;font-weight:400;line-height:32px;
  letter-spacing:1.4px;text-transform:uppercase;color:var(--body);width:auto;
  text-align:center;display:block}
.nav a:hover{color:var(--navon)}
.nav a.on{color:var(--navon)}

/* ---- product image panel -------------------------------------------------- */
/* The reference sits product photography bare on the page with no card, no
   border and no shadow. That works because its ground is white and its shirts
   are dark. Here the ground is black and so are the shirts, so the image keeps
   a light panel — but the card chrome it used to carry, the padding and the
   heavy drop shadow, is gone. */
.card{display:block;background:var(--card);padding:0}
.card:hover{background:#FFFFFF}
.card img,.card svg{display:block;width:100%;height:auto;background:transparent}
.card--photo img{aspect-ratio:192/232;object-fit:cover}

/* ---- buttons ------------------------------------------------------------- */
/* Wide, flat, uppercase, 6px radius — the reference's button, inverted for a
   dark ground: cream fill and near-black text rather than black on white. */
.pillbtn{display:inline-block;font-family:var(--display);font-size:16px;font-weight:600;
  line-height:24px;letter-spacing:0.96px;text-transform:uppercase;
  background:var(--pill);color:var(--pill-ink);border:1px solid var(--pill);
  border-radius:6px;padding:18px 48px;text-align:center}
.pillbtn:hover{background:#FFFFFF;border-color:#FFFFFF;color:var(--pill-ink)}
/* Secondary is the same shape as an outline, which is how a monochrome system
   makes a second button without reaching for a colour. */
.pillbtn.inv{background:transparent;color:var(--ink);border:1px solid var(--hair)}
.pillbtn.inv:hover{background:var(--pill);color:var(--pill-ink);border-color:var(--pill)}
.hero .cta .pillbtn{font-size:17px;padding:20px 54px}
.buy{display:inline-block;font-family:var(--display);font-size:13px;font-weight:600;
  line-height:22px;letter-spacing:0.8px;text-transform:uppercase;
  color:var(--ink);background:transparent;padding:6px 20px;border-radius:6px;
  border:1px solid var(--hair)}
.buy:hover{background:var(--pill);color:var(--pill-ink);border-color:var(--pill)}
.buy.on{background:var(--pill);color:var(--pill-ink);border-color:var(--pill)}
/* The surcharge on a size button: smaller and quieter than the size itself,
   because it is a qualifier, not the label. */
.buy .up{display:inline-block;margin-left:6px;font-size:10px;font-style:normal;
  letter-spacing:0.4px;opacity:.72;vertical-align:1px}

/* ---- flash --------------------------------------------------------------- */
.flash{position:relative;z-index:3;margin:14px auto 0;width:var(--page);max-width:100%;
  padding:14px 18px;font-size:15px;
  background:rgba(255,255,255,0.06);border-left:2px solid var(--buy)}
.flash.err{border-left-color:var(--err);color:var(--err)}

/* ---- masthead ------------------------------------------------------------ */
/* The photograph spans the header as well as the hero, so it reads as the
   masthead rather than as an image inside the hero. The header and the hero
   copy are given a higher stacking order, which is what lets the wordmark
   cross his face. Decorative throughout. */
.masthead{position:absolute;left:0;right:0;top:-19px;height:980px;overflow:hidden;
  z-index:0;pointer-events:none}
/* Static, so the photograph, the scrim and the fade are all laid out against
   the full-width .masthead instead of the column: the photograph has to run off
   the right edge of the window, or its own edge shows as a seam. */
.mh-inner{position:static;width:var(--page);max-width:100%;height:100%;margin:0 auto;padding:0 var(--gut)}
.mh-figure{position:absolute;right:0;top:-60px;max-width:none;
  width:min(58vw,1120px);height:1060px;object-fit:cover;object-position:46% 50%;
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 26%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 26%)}
/* The photograph brings its own background, so the left half is scrimmed back
   to the field to hold the hero copy, and the foot is faded into the page. */
.mh-scrim{position:absolute;inset:0;
  background:linear-gradient(to right,
    var(--field) 0%, rgba(14,14,13,0.94) 22%, rgba(14,14,13,0.70) 40%,
    rgba(14,14,13,0.34) 58%, rgba(14,14,13,0.08) 78%, rgba(14,14,13,0) 100%)}
.mh-fade{position:absolute;left:0;right:0;bottom:0;height:300px;
  background:linear-gradient(to top,
    var(--field) 0%, var(--field) 20%,
    rgba(14,14,13,0.95) 34%, rgba(14,14,13,0.82) 48%, rgba(14,14,13,0.58) 62%,
    rgba(14,14,13,0.32) 76%, rgba(14,14,13,0.12) 90%, rgba(14,14,13,0) 100%)}

/* ---- hero copy ----------------------------------------------------------- */
.hero{position:relative;height:640px;z-index:2}
.hero .copy{position:absolute;left:0;top:0;bottom:0;width:640px;display:flex;
  flex-direction:column;justify-content:center}
.hero .eyebrow{font-size:15px;line-height:24px;letter-spacing:0.34em;
  text-transform:uppercase;color:var(--meta)}
/* The signature move: enormous, uppercase, tracked in rather than out. */
.hero h1{margin-top:22px;font-family:var(--display);font-weight:700;
  font-size:clamp(52px,6.6vw,96px);line-height:0.94;letter-spacing:-0.055em;
  text-transform:uppercase;color:var(--ink)}
.hero p{margin-top:26px;max-width:440px;font-size:16px;line-height:30px;color:var(--body)}
.hero .cta{margin-top:38px;display:flex;align-items:center;gap:18px}
.hero .code{font-size:14px;color:var(--meta)}
.hero .code b{font-family:var(--display);font-weight:600;color:var(--h)}

/* ---- product rows -------------------------------------------------------- */
.row4{display:flex;justify-content:center;gap:34px}
.row4 .card{width:280px}
.tile{width:100%}
.tile .meta{margin-top:18px;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.tile .meta a{font-family:var(--display);font-size:20px;font-weight:600;line-height:26px;
  letter-spacing:0.26px;text-transform:uppercase;color:var(--ink)}
.tile .meta a:hover{color:var(--navon)}
.tile .meta span{font-family:var(--body-font);font-size:16px;color:var(--body)}
.tile form{margin-top:14px}
.centre{text-align:center}
.mt34{padding-top:48px}

/* ---- shop ---------------------------------------------------------------- */
.filters{display:flex;align-items:baseline;justify-content:center;gap:44px}
.filters a{font-family:var(--body-font);font-size:15px;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--body)}
.filters a:hover{color:var(--navon)}
.filters a.on{color:var(--navon)}
.filters a span{font-size:12px;opacity:.55;letter-spacing:0}
.count{margin-top:18px;text-align:center;font-size:14px;letter-spacing:0.5px;color:var(--meta)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);column-gap:48px;row-gap:72px}
.grid2 .tile .meta{margin-top:20px}
.grid2 .tile .meta a{font-size:24px;line-height:30px}
.grid2 .tile .meta span{font-size:18px}

/* ---- product page -------------------------------------------------------- */
.pdp{display:flex;gap:80px;align-items:flex-start}
.pdp .gallery{width:600px;flex-shrink:0}
.pdp .gallery .main{width:600px;padding:0}
.pdp .thumbs{margin-top:22px;display:flex;gap:16px}
.pdp .thumbs button{width:132px;padding:0}
.pdp .thumbs button.on{outline:2px solid var(--ink);outline-offset:2px}
/* Photographs are square or landscape; the flats are 404x488. Cropping the
   photographs to that frame stops the panel resizing as views are switched. */
.pdp .gallery .main .shot--photo{aspect-ratio:404/488;object-fit:cover;object-position:50% 34%}
.pdp .thumbs .shot--photo{aspect-ratio:98/118;object-fit:cover;object-position:50% 34%}
/* A photo much wider than the frame cannot be cropped to it without risking
   losing the garment entirely — a wide shot with the model off to one side
   crops down to bare backdrop. Those are shown whole instead of filled. */
.pdp .gallery .main .shot--wide,.pdp .thumbs .shot--wide{object-fit:contain;background:var(--card)}
.card--wide img{object-fit:contain;background:var(--card)}
.pdp .info{flex-grow:1}
.pdp h1{font-family:var(--display);font-weight:700;font-size:52px;line-height:1.0;
  letter-spacing:-0.03em;text-transform:uppercase;color:var(--ink)}
.pdp .sub{margin-top:14px;font-size:14px;letter-spacing:1.2px;text-transform:uppercase;color:var(--meta)}
.pdp .price{margin-top:22px;font-family:var(--display);font-weight:300;font-size:36px;
  letter-spacing:0.26px;color:var(--ink)}
.pdp .blurb{margin-top:22px;font-size:16px;line-height:30px;color:var(--body);max-width:520px}
.pdp .lbl{margin-top:34px;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--h)}
.pdp .lbl span{color:var(--meta)}
.opts{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}
.opts .sw{width:38px;height:38px;border:1px solid var(--hair)}
.opts .sw.on{outline:2px solid var(--ink);outline-offset:2px}
.opts .size{min-width:56px;text-align:center}
.buyrow{margin-top:38px;display:flex;align-items:center;gap:16px}
.stepper{display:flex;align-items:center;background:transparent;color:var(--ink);
  border:1px solid var(--hair);border-radius:6px}
.stepper button{width:44px;height:52px;font-size:18px;color:var(--ink)}
.stepper button:hover{background:rgba(255,255,255,.08)}
.stepper .n{width:42px;text-align:center;font-size:16px;font-family:var(--display);
  color:var(--ink);border:0;background:none;padding:0}
.note{margin-top:18px;font-size:14px;color:var(--meta)}
.acc{margin-top:42px;max-width:560px}
.acc details{border-top:1px solid var(--hair2);padding:20px 0 0;margin-top:0}
.acc summary{list-style:none;cursor:pointer;font-family:var(--display);font-size:16px;
  font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--h);display:flex;align-items:center;justify-content:space-between}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'+';font-size:18px;font-weight:300}
.acc details[open] summary::after{content:'\2212'}
.acc p{margin-top:14px;padding-bottom:20px;font-size:16px;line-height:30px;color:var(--body)}

/* ---- bag ----------------------------------------------------------------- */
.bag{display:flex;gap:64px;align-items:flex-start}
.bag .lines{flex-grow:1;border-top:1px solid var(--hair2)}
.line{display:flex;gap:28px;align-items:center;padding:26px 0;
  border-bottom:1px solid var(--hair2)}
.line .thumb{width:128px;flex-shrink:0;padding:0}
.line .who{flex-grow:1}
.line .who a{font-family:var(--display);font-size:20px;font-weight:600;
  letter-spacing:0.26px;text-transform:uppercase;color:var(--ink)}
.line .who p{margin-top:6px;font-size:15px;color:var(--meta)}
.line .who button{margin-top:10px;font-size:14px;color:var(--meta);text-decoration:underline}
.line .amt{width:110px;text-align:right;font-family:var(--display);font-size:20px;
  font-weight:300;color:var(--h);flex-shrink:0}
.summary{width:380px;flex-shrink:0;color:#1A1A18;padding:30px 30px 34px}
.summary h2{font-size:22px;color:#1A1A18}
.summary .r{margin-top:10px;display:flex;justify-content:space-between;font-size:15px}
.summary .r span:first-child{color:#54544E}
.summary h3{margin-top:24px;font-family:var(--display);font-size:15px;font-weight:600;
  letter-spacing:1.2px;color:#2B2B27}
.summary .ship{display:flex;align-items:center;gap:12px;padding:11px 0;text-align:left;width:100%}
.summary .ship .dot{position:relative;width:16px;height:16px;border-radius:50%;background:#FFF;
  flex-shrink:0;border:1px solid #C4C4BE}
.summary .ship.on .dot::after{content:'';position:absolute;left:3px;top:3px;width:8px;height:8px;
  border-radius:50%;background:#1A1A18}
.summary .ship .t{flex-grow:1;font-size:15px;color:#2B2B27}
.summary .ship .t i{font-style:normal;color:#54544E}
.summary .ship .p{font-family:var(--display);font-size:15px;color:#2B2B27}
.summary .promo{margin-top:12px;display:flex;gap:8px}
.summary .promo input{flex-grow:1;height:44px;padding:0 12px;border:1px solid #C4C4BE;
  background:#FDFDFB}
/* The card is light, so the site's light-on-dark buttons flip here: Apply is a
   dark outline, checkout is the solid primary. */
.summary .buy{color:#1A1A18;border-color:#1A1A18}
.summary .buy:hover{background:#1A1A18;color:#F4F4EE;border-color:#1A1A18}
.summary .pillbtn.inv{background:#1A1A18;color:#F4F4EE;border-color:#1A1A18}
.summary .pillbtn.inv:hover{background:#000;color:#FFF;border-color:#000}
.summary .promo input[aria-invalid="true"]{border-color:#B3261E}
.summary .promo-msg{margin-top:8px;font-size:14px;color:#2E6B34}
.summary .promo-msg.err{color:#B3261E}
.summary .total{margin-top:24px;padding-top:18px;border-top:1px solid #C4C4BE;
  display:flex;align-items:baseline;justify-content:space-between}
.summary .total .l{font-family:var(--display);font-size:16px;font-weight:600;
  letter-spacing:1.2px;color:#1A1A18}
.summary .total .v{font-family:var(--display);font-size:30px;font-weight:300;color:#1A1A18}
.summary .fine{margin-top:16px;font-size:13px;line-height:20px;color:#6C6C66;text-align:center}
.empty{padding:96px 0;text-align:center}
.empty h2{font-size:34px;letter-spacing:-0.01em;color:var(--ink)}
.empty p{margin-top:14px;font-size:16px;color:var(--body)}

/* ---- content pages ------------------------------------------------------- */
.prose h2{margin-top:56px;font-size:24px;font-weight:600;letter-spacing:0.26px;color:var(--h)}
.prose h2:first-child{margin-top:0}
.prose p{margin-top:16px;font-size:16px;line-height:32px;color:var(--body)}
.prose a{color:var(--ink);text-decoration:underline}
.prose a:hover{color:var(--navon)}
.prose ul{margin:16px 0 0;padding-left:20px}
.prose li{margin-top:8px;font-size:16px;line-height:30px;color:var(--body)}
.prose em{color:var(--meta);font-style:italic}
.details{text-align:center}
.details h2{margin-top:34px;font-family:var(--display);font-size:22px;line-height:28px;color:var(--h)}
.details p{margin-top:12px;font-size:16px;color:var(--body)}
/* The reference's section heading: big, light weight, uppercase, airy. */
.sec-h{font-family:var(--display);font-weight:300;font-size:48px;line-height:1.2;
  letter-spacing:0.26px;text-transform:uppercase;color:var(--ink);text-align:center}

/* ---- forms --------------------------------------------------------------- */
.formcard{width:760px;max-width:100%;margin:0 auto;color:#1A1A18;padding:38px 38px 42px}
.formcard h2{font-size:26px;color:#1A1A18;text-align:center}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fld{display:block}
.fld > span{display:block;margin-bottom:8px;font-family:var(--display);font-size:13px;
  font-weight:600;letter-spacing:1.1px;text-transform:uppercase;color:#2B2B27}
.fld input,.fld select,.fld textarea{width:100%;height:48px;padding:0 14px;
  border:1px solid #C4C4BE;background:#FDFDFB;border-radius:6px}
.fld textarea{height:150px;padding:13px 14px;line-height:28px;resize:vertical}
.sent{text-align:center;padding:32px 0}
.sent .tick{font-family:var(--display);font-size:40px;color:#77776F}
.sent h2{margin-top:12px;font-size:28px}
.sent p{margin:14px auto 0;max-width:440px;font-size:15px;line-height:28px;color:#3A3A37}

/* Wholesale application: a longer form than the contact note, so it is broken
   into labelled groups and carries per-field errors. Inside .formcard, which is
   a light card — colours here are dark-on-light, not the site's usual reverse. */
.fgroup{margin:34px 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.12);
  font-family:var(--display);font-weight:600;font-size:14px;letter-spacing:1.2px;
  text-transform:uppercase;color:#2B2B27}
.fgroup:first-of-type{margin-top:22px}
.fld small{display:block;margin-top:7px;font-size:13px;line-height:20px;color:#6A6A63}
.fld-err{display:block;margin-top:7px;font-size:13px;line-height:20px;color:#8C2F2F}
.fld input[aria-invalid],.formerr{border-color:#8C2F2F}
.formerr{margin-top:18px;padding:12px 15px;border-left:2px solid #8C2F2F;
  background:rgba(140,47,47,.07);font-size:14px;color:#7A2A2A}
.fld.check{display:flex;align-items:flex-start;gap:12px}
.fld.check input{width:18px;height:18px;flex-shrink:0;margin-top:5px;padding:0}
.fld.check > span{margin:0;font-family:var(--body-font);font-size:14px;line-height:24px;
  letter-spacing:0;text-transform:none;font-weight:400;color:#3A3A37}
.fld.check a{color:#2B2B27;text-decoration:underline}

/* ---- newsletter ---------------------------------------------------------- */
.news{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}
.news .h{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:0.26px;
  text-transform:uppercase;color:var(--ink)}
.news form{display:flex;align-items:center;gap:10px}
.news input{width:320px;height:48px;padding:0 16px;border:1px solid var(--hair);
  background:transparent;color:var(--ink);border-radius:6px}
.news input::placeholder{color:var(--muted)}

/* ---- footer -------------------------------------------------------------- */
.foot{padding-bottom:64px}
.foot .cols{display:flex;gap:80px;padding:48px 0 0}
.foot .brand{width:260px;flex-shrink:0}
.foot .brand svg{width:190px;height:auto;fill:var(--flogo);display:block}
.foot .brand p{margin-top:16px;font-size:13px;line-height:22px;color:var(--meta)}
.foot .blurb{font-size:15px;line-height:28px;color:var(--body)}
.foot .fpress{width:220px;flex-shrink:0;font-size:15px;line-height:26px;color:var(--body)}
.foot .fpress .h{display:block;font-family:var(--display);font-size:13px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--h)}
.foot .fpress p{margin-top:8px}
.foot .fpress a{display:inline-block;margin-top:10px;color:var(--ink)}
.foot .fpress a:hover{color:var(--navon)}
.foot .links{padding:26px 0 0;text-align:center;font-size:14px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--ink)}
.foot .links a{color:var(--ink)}
.foot .links a:hover{color:var(--muted)}
.foot .links.legal{padding-top:14px;font-size:13px;letter-spacing:0.8px;color:var(--meta)}
.foot .links.legal a{color:var(--meta)}
.foot .links.legal a:hover{color:var(--navon)}
.foot a.u{text-decoration:underline}
/* Deliberately quiet: the same grey as the footer wordmark, lighting up only
   on hover. It is a door for us, not a call to action for a customer. */
.foot .backdoor{display:block;width:14px;margin:24px 0 0 auto;line-height:0;color:var(--flogo)}
.foot .backdoor:hover{color:var(--h)}

/* ---- responsive ---------------------------------------------------------- */
@media (max-width:1380px){
  :root{--page:100%;--gut:24px}
}
@media (max-width:1000px){
  :root{--gut:16px;--rhythm:72px;--rhythm-lg:88px}
  .wordmark{height:auto;padding:18px 0 20px}
  .wordmark svg{width:min(820px,86vw)}
  .wordmark .tag{margin-top:13px;font-size:11px;letter-spacing:0.26em;text-indent:0.26em}
  .nav{flex-wrap:wrap;gap:0 26px;padding:0 0 14px}
  .nav a{font-size:14px}
  .hero{height:auto;min-height:560px}
  .hero .copy{width:100%;max-width:560px}
  .grid2{column-gap:28px;row-gap:48px}
  .row4{flex-wrap:wrap}
  .row4 .card{width:calc(50% - 17px)}
  .pdp{flex-direction:column;gap:40px}
  .pdp .gallery,.pdp .gallery .main{width:100%}
  .pdp h1{font-size:40px}
  .bag{flex-direction:column;gap:40px}
  .summary{width:100%}
  .formcard{width:100%;padding:28px 22px 32px}
  .foot .cols{gap:44px}
}
@media (max-width:640px){
  :root{--rhythm:56px;--rhythm-lg:64px}
  .hero{height:auto;min-height:0;padding-bottom:8px}
  .masthead{height:640px}
  .mh-figure{left:0;right:0;top:0;width:100%;height:660px}
  .mh-scrim{background:linear-gradient(to top,
    var(--field) 0%, rgba(14,14,13,0.86) 24%, rgba(14,14,13,0.40) 52%,
    rgba(14,14,13,0) 78%)}
  .mh-fade{height:220px}
  .hero{padding-top:270px}
  .hero .copy{position:relative;width:100%}
  .hero h1{font-size:clamp(38px,11vw,54px)}
  .hero .eyebrow{font-size:13px}
  .hero .cta{flex-direction:column;align-items:stretch;gap:12px}
  .pillbtn{padding:16px 32px}
  .row4 .card{width:calc(50% - 17px)}
  .grid2{grid-template-columns:1fr;row-gap:40px}
  .util{height:44px;font-size:12px}
  .social{display:none}
  .line{flex-wrap:wrap;gap:18px}
  .line .thumb{width:96px}
  .line .amt{width:auto}
  .f2{grid-template-columns:1fr}
  .news{flex-direction:column;gap:16px}
  .news input{width:100%}
  .news form{width:100%}
  .sec-h{font-size:32px}
  .empty{padding:56px 0}
  .foot .cols{flex-direction:column;gap:30px}
  .foot .brand,.foot .fpress{width:auto}
}

/* ---- about: detail photography ------------------------------------------- */
.fd-lede{font-size:18px;line-height:34px;color:var(--body);max-width:62ch}
.fd-band{margin:56px 0 10px;padding:0;border:0}
.fd-band img{display:block;width:100%;height:auto}
.fd-cap{margin-top:14px;font-size:14px;letter-spacing:0.8px;color:var(--meta)}
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px;margin:56px 0 10px}
.fd-card{margin:0}
.fd-card img{display:block;width:100%;height:auto;border:0;background:#0E0E0D}
.fd-card figcaption{margin-top:18px;font-size:16px;line-height:30px;color:var(--body)}
.fd-card figcaption b{display:block;margin-bottom:8px;font-family:var(--display);font-weight:600;
  font-size:18px;letter-spacing:0.26px;text-transform:uppercase;color:var(--ink)}
.fd-note{margin:48px 0 0;padding:20px 24px;border-left:2px solid var(--hair);
  font-size:16px;line-height:30px;color:var(--body);background:rgba(255,255,255,.03)}
.fd-pending{display:flex;align-items:center;justify-content:center;text-align:center;
  aspect-ratio:3/2;border:1px solid var(--hair2);background:rgba(255,255,255,.02);
  padding:24px;font-size:14px;line-height:24px;color:var(--meta)}
.fd-spec{margin:48px 0 0;padding:0;list-style:none;border-top:1px solid var(--hair2)}
.fd-spec li{display:flex;gap:24px;justify-content:space-between;padding:16px 0;
  border-bottom:1px solid var(--hair2);font-size:16px;color:var(--body)}
.fd-spec li span:first-child{color:var(--meta);font-family:var(--display);font-size:14px;
  letter-spacing:1.2px;text-transform:uppercase}
.fd-spec li span:last-child{text-align:right}
@media(max-width:720px){.fd-grid{grid-template-columns:1fr;gap:40px}}