/* ------------------------------------------------------------------
   tentkotta — the tent frame
   Greyscale canvas, scalloped valances, poles and guy lines. Colour
   only ever comes from a bay's own app palette (set per <section>).
------------------------------------------------------------------ */

:root{
  --canvas:      #e9e8e3;
  --canvas-2:    #e0dfd9;
  --canvas-deep: #d3d2cb;
  --ink:         #17171a;
  --ink-2:       #43434a;
  --muted:       #78776f;
  --rule:        rgba(23,23,26,.18);
  --rule-soft:   rgba(23,23,26,.09);

  --display:"Bodoni Moda",'Didot','Bodoni MT',Georgia,serif;
  --chrome:"Archivo",'Helvetica Neue',Helvetica,Arial,sans-serif;

  /* one scallop tile, used as a mask so the band takes any colour */
  --scallop:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='25'%3E%3Crect width='30' height='10' fill='%23000'/%3E%3Ccircle cx='15' cy='10' r='15' fill='%23000'/%3E%3C/svg%3E");

  --pole:52px;          /* width of the striped tent wall down each side */
  --gutter:clamp(18px,4vw,54px);
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--chrome);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}

.skip{
  position:absolute;left:-9999px;top:0;z-index:99;
  background:var(--ink);color:var(--canvas);padding:10px 16px;
  font:600 13px/1 var(--chrome);letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:0}

:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- the tent itself ------------------------------------- */

.tent{
  position:relative;
  max-width:1180px;
  margin:0 auto;
  /* striped canvas walls down both sides, ridge hairline dead centre */
  background:
    linear-gradient(var(--rule-soft),var(--rule-soft)) 50% 0/1px 100% no-repeat,
    repeating-linear-gradient(90deg,var(--canvas-2) 0 13px,var(--canvas-deep) 13px 26px) 0 0/var(--pole) 100% no-repeat,
    repeating-linear-gradient(90deg,var(--canvas-2) 0 13px,var(--canvas-deep) 13px 26px) 100% 0/var(--pole) 100% no-repeat,
    var(--canvas);
  border-left:1px solid var(--rule-soft);
  border-right:1px solid var(--rule-soft);
}
.tent > *{position:relative;z-index:1}

.inner{
  padding-left:calc(var(--pole) + var(--gutter));
  padding-right:calc(var(--pole) + var(--gutter));
}

/* ---------- masthead: roof, guy lines, valance ------------------- */

.peak{position:relative;padding-top:14px}

.roof{
  height:clamp(96px,15vw,168px);
  background:repeating-linear-gradient(
    90deg,
    #dbdad2 0 34px,
    #c8c7be 34px 68px);
  clip-path:polygon(50% 0,100% 100%,0 100%);
  border-bottom:0;
}
.guys{
  position:absolute;inset:14px 0 auto 0;
  height:clamp(96px,15vw,168px);
  width:100%;
  pointer-events:none;
}
.guys line{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}
.guys circle{fill:var(--rule)}

.valance{
  height:25px;
  background-color:var(--valance-color,var(--canvas-deep));
  -webkit-mask-image:var(--scallop);
  mask-image:var(--scallop);
  -webkit-mask-size:30px 25px;
  mask-size:30px 25px;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
}

.masthead{
  text-align:center;
  padding-top:clamp(30px,6vw,58px);
  padding-bottom:clamp(28px,5vw,46px);
}
.wordmark{
  margin:0;
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:clamp(56px,13vw,148px);
  line-height:.9;
  letter-spacing:-.02em;
}
.rule-row{
  display:flex;align-items:center;gap:16px;
  margin:clamp(18px,3vw,30px) auto 0;
  max-width:640px;
}
.rule-row::before,.rule-row::after{
  content:"";flex:1;height:1px;background:var(--rule);
}
.rule-row span{
  font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  white-space:nowrap;
}
.lede{
  margin:22px auto 0;
  max-width:46ch;
  font-family:var(--display);
  font-weight:500;
  font-size:clamp(17px,2.2vw,22px);
  line-height:1.55;
  color:var(--ink-2);
}

/* ---------- bunting index --------------------------------------- */

.bill{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin-top:clamp(26px,5vw,44px);
  padding-bottom:8px;
  list-style:none;
}
.bill a{
  display:block;
  padding:9px 15px 20px;
  background:var(--canvas-2);
  border:1px solid var(--rule-soft);
  border-bottom:0;
  clip-path:polygon(0 0,100% 0,100% 58%,50% 100%,0 58%);
  text-decoration:none;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-2);
  transition:transform .18s ease,background .18s ease,color .18s ease;
}
.bill a:hover,.bill a:focus-visible{transform:translateY(3px);background:var(--canvas-deep);color:var(--ink)}
.bill .pip{
  display:inline-block;width:6px;height:6px;margin-right:8px;
  background:var(--pip);vertical-align:middle;border-radius:50%;
}

/* ---------- a bay ------------------------------------------------ */

.bay{
  /* inset by one pole width so the striped canvas walls run unbroken
     from roof to stakes — the bay is a room inside the tent, not a slab
     laid over it */
  margin:clamp(30px,5vw,56px) var(--pole);
  --bay-rule:color-mix(in srgb,var(--bay-ink) 16%,transparent);
}
.bay .inner{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.bay .valance{--valance-color:var(--bay-valance,var(--bay-accent))}

.bay-body{
  background:var(--bay-bg);
  color:var(--bay-ink);
  padding:clamp(30px,5vw,62px) 0 clamp(34px,5vw,64px);
}
.bay-grid{
  display:grid;
  grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:clamp(26px,4vw,56px);
  align-items:start;
}

.bay-rail{display:flex;flex-direction:column;gap:20px}
.bay-no{
  font-family:var(--display);
  font-size:clamp(44px,7vw,76px);
  line-height:.85;
  font-weight:400;
  color:var(--bay-accent);
  opacity:.5;
}
.bay-logo{
  width:clamp(76px,10vw,104px);
  height:clamp(76px,10vw,104px);
  object-fit:contain;
  border-radius:14px;
}
.bay-logo.plain{border-radius:0}
.bay-meta{
  margin:0;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:6px 18px;
  font-size:12px;
  letter-spacing:.06em;
}
.bay-meta dt{
  text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;
  color:color-mix(in srgb,var(--bay-ink) 55%,transparent);
  padding-top:1px;
}
.bay-meta dd{margin:0;color:color-mix(in srgb,var(--bay-ink) 88%,transparent)}

.bay-name{
  margin:0;
  font-family:var(--bay-font);
  font-size:clamp(34px,5.4vw,58px);
  line-height:1.02;
  font-weight:var(--bay-name-weight,600);
  letter-spacing:var(--bay-name-track,-.01em);
  color:var(--bay-ink);
}
.bay-tagline{
  margin:14px 0 0;
  font-family:var(--bay-font);
  font-size:clamp(18px,2.4vw,25px);
  line-height:1.35;
  font-weight:400;
  color:var(--bay-accent);
  max-width:26ch;
}
.bay-lede{
  margin:22px 0 0;
  max-width:60ch;
  font-family:var(--bay-body,var(--chrome));
  font-size:16.5px;
  color:color-mix(in srgb,var(--bay-ink) 86%,transparent);
}

.points{
  margin:28px 0 0;padding:0;list-style:none;
  border-top:1px solid var(--bay-rule);
  max-width:64ch;
}
.points li{
  display:grid;
  grid-template-columns:minmax(0,140px) minmax(0,1fr);
  gap:6px 22px;
  padding:13px 0;
  border-bottom:1px solid var(--bay-rule);
  font-family:var(--bay-body,var(--chrome));
  font-size:15px;
  color:color-mix(in srgb,var(--bay-ink) 82%,transparent);
}
.points b{
  font-family:var(--chrome);
  font-weight:500;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--bay-ink) 55%,transparent);
  padding-top:3px;
}

.links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.links a{
  display:inline-flex;align-items:center;gap:10px;
  padding:11px 17px;
  border:1px solid color-mix(in srgb,var(--bay-accent) 55%,transparent);
  color:var(--bay-accent);
  text-decoration:none;
  font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  transition:background .18s ease,color .18s ease;
}
.links a:hover,.links a:focus-visible{
  background:var(--bay-accent);
  color:var(--bay-bg);
}
.links a .arw{font-size:11px;opacity:.8}
.links .muted{
  border-style:dashed;
  border-color:var(--bay-rule);
  color:color-mix(in srgb,var(--bay-ink) 45%,transparent);
  pointer-events:none;
}

/* ---------- rail extras: shots, usage block, paired logos -------- */

.shot{
  margin:4px 0 0;
  border:1px solid var(--bay-rule);
  background:color-mix(in srgb,var(--bay-ink) 4%,transparent);
}
.shot img{width:100%;height:auto}
.shot figcaption{
  padding:9px 11px;
  border-top:1px solid var(--bay-rule);
  font-family:var(--chrome);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:color-mix(in srgb,var(--bay-ink) 50%,transparent);
}
.usage{
  margin:0;padding:15px 14px;
  font-family:var(--bay-body,ui-monospace,monospace);
  font-size:12px;line-height:1.75;
  white-space:pre;overflow-x:auto;
  color:color-mix(in srgb,var(--bay-ink) 72%,transparent);
}
.logo-pair{display:flex;align-items:center;gap:13px}
.logo-pair img{width:clamp(40px,5vw,52px);height:clamp(40px,5vw,52px)}
.logo-pair .to{
  font-size:19px;
  color:color-mix(in srgb,var(--bay-ink) 45%,transparent);
}

.links .ico{width:18px;height:18px;flex:0 0 auto;border-radius:3px}
.foot p a{color:var(--ink);text-underline-offset:3px}
.foot p a:hover{color:var(--muted)}

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

.foot{
  padding-top:clamp(30px,5vw,50px);
  padding-bottom:clamp(34px,5vw,56px);
}
.foot .rule-row{margin-top:0}
.foot p{
  margin:20px auto 0;text-align:center;max-width:52ch;
  font-size:13px;color:var(--muted);
}
.foot .stakes{display:block;width:100%;height:34px;margin-top:26px}
.foot .stakes line{stroke:var(--rule);stroke-width:1;vector-effect:non-scaling-stroke}

/* ---------- narrow ----------------------------------------------- */

@media (max-width:820px){
  :root{--pole:26px}
  .bay-grid{grid-template-columns:minmax(0,1fr)}
  .bay-rail{
    flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap;
  }
  .bay-no{font-size:40px}
  .bay-logo{width:64px;height:64px}
  .bay-meta{flex-basis:100%}
  .shot{flex-basis:100%}
  .points li{grid-template-columns:minmax(0,1fr)}
  .points b{padding-top:0}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}