@font-face{font-family:"Archivo";src:url("fonts/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo Narrow";src:url("fonts/archivo-narrow-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* Can Company Warehouse — cancompanywarehouse.com
   Brand kit sampled from the building's own photographs, 15 Sep 2026. */

:root{
  --olive:#6B6A2E;
  --olive-deep:#4A491F;
  --brick:#8A5238;
  --star:#C8372B;
  --star-deep:#9E2A20;
  --ground:#E9E4D9;
  --ink:#221F1A;

  --ground-warm:#DFD8C9;
  --ground-deep:#CFC6B3;
  --paper:#F4F1E9;
  --rule:rgba(34,31,26,.16);

  --display:"Archivo Narrow","Arial Narrow","Helvetica Neue Condensed",
            "Liberation Sans Narrow",Arial,sans-serif;
  --body:"Archivo","Helvetica Neue",Helvetica,Arial,
         "Segoe UI",Roboto,system-ui,sans-serif;

  --wrap:1180px;
  --gutter:clamp(1rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.005em;
  color:var(--olive-deep);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.35rem,6.2vw,4.25rem)}
h2{font-size:clamp(1.85rem,4vw,2.85rem)}
h3{font-size:clamp(1.2rem,2.2vw,1.5rem)}
p{margin:0 0 1.15em;max-width:66ch}
a{color:var(--olive-deep);text-decoration-thickness:1px;text-underline-offset:.16em}
a:hover{color:var(--star-deep)}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* ---------- eyebrow / small caps label ---------- */
.eyebrow{
  font-family:var(--display);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.78rem;
  color:var(--olive-deep);
  margin:0 0 .9rem;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;font-size:.9rem;
  padding:.85rem 1.4rem;border:2px solid var(--olive-deep);
  background:transparent;color:var(--olive-deep);
  text-decoration:none;border-radius:2px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.btn:hover{background:var(--olive-deep);color:var(--paper)}
/* Star red is reserved for booking actions only. */
.btn--book{background:var(--star);border-color:var(--star);color:#fff}
.btn--book:hover{background:#A82A20;border-color:#A82A20;color:#fff}
.btn--light{border-color:var(--paper);color:var(--paper)}
.btn--light:hover{background:var(--paper);color:var(--olive-deep)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin:1.6rem 0 0}

/* ---------- mark ---------- */
.mark{width:34px;height:34px;flex:0 0 auto}
.mark .pane{fill:none;stroke:currentColor;stroke-width:6}
.mark .frame{fill:none;stroke:currentColor;stroke-width:8}
.mark .star{fill:var(--star)}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:env(safe-area-inset-top,0px);z-index:50;
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.site-head__in{
  display:flex;align-items:center;gap:1rem;
  min-height:68px;
}
.brand{
  display:flex;align-items:center;gap:.7rem;
  color:var(--olive-deep);text-decoration:none;margin-right:auto;
}
.brand__name{
  font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.11em;
  font-size:clamp(.82rem,2.4vw,1.02rem);line-height:1.1;
}
.brand__name span{display:block;font-size:.66em;letter-spacing:.2em;color:var(--olive);font-weight:700}
.site-nav{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.site-nav a{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.875rem;text-decoration:none;color:var(--olive-deep);
  padding-block:.35rem;
}
.site-nav a:hover{color:var(--star-deep)}
.site-nav .btn{padding:.62rem 1rem;font-size:.8rem}
@media (max-width:760px){
  /* Not sticky on phones - a two-row header would eat a quarter of the screen
     for the whole scroll, and there is a booking CTA in every section anyway. */
  .site-head{position:static}
  .site-head__in{flex-wrap:wrap;padding-block:.6rem;min-height:0;gap:.5rem}
  .site-nav{width:100%;gap:.65rem .9rem;border-top:1px solid var(--rule);padding-top:.6rem}
  .site-nav a{font-size:.875rem;padding-block:.5rem}
  .site-nav .btn{margin-left:auto;padding:.6rem 1rem;font-size:.8rem}
  .use{scroll-margin-top:12px}
}

/* ---------- hero ---------- */
.hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);
  align-items:center;padding-block:clamp(2.5rem,6vw,4.5rem);
}
.hero__fig{margin:0;position:relative}
.hero__fig img{
  width:100%;height:min(66vh,600px);
  object-fit:cover;object-position:50% 56%;
  border-radius:2px;
}
.hero h1{margin-bottom:.35em}
.hero__lede{font-size:clamp(1.08rem,1.6vw,1.24rem);max-width:34ch}
.hero__meta{
  margin:1.6rem 0 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:.45rem 1.4rem;
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.09em;font-size:.8rem;color:var(--olive);
}
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;padding-block:clamp(1.75rem,5vw,3rem)}
  .hero__fig{order:-1}
  .hero__fig img{height:min(46vh,340px);object-position:50% 52%}
}

/* ---------- notice band ---------- */
.notice{
  background:var(--olive-deep);color:var(--paper);
  font-size:.95rem;
}
.notice__in{padding-block:.85rem;display:flex;gap:.3rem 1rem;align-items:baseline;flex-wrap:wrap}
.notice__in>p{flex:1 1 30ch}
.notice strong{font-family:var(--display);text-transform:uppercase;letter-spacing:.11em;font-size:.8rem}
.notice p{margin:0;max-width:none;color:#EDE8DC}

/* ---------- facts strip ---------- */
.facts{background:var(--ground-warm);border-bottom:1px solid var(--rule)}
.facts__in{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  padding-block:0;
}
.fact{padding:1.5rem .25rem 1.6rem}
.fact + .fact{box-shadow:-1px 0 0 var(--rule)}
.fact dt{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.13em;font-size:.72rem;color:var(--olive-deep);margin-bottom:.3rem;
}
.fact dd{
  margin:0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.1;color:var(--olive-deep);
}
.fact dd small{display:block;font-family:var(--body);font-weight:400;font-size:.8rem;
  letter-spacing:0;color:var(--ink);opacity:.72;margin-top:.25rem;line-height:1.4}
@media (max-width:760px){
  .facts__in{grid-template-columns:1fr 1fr}
  .fact{padding-inline:.5rem}
  .fact:nth-child(odd){box-shadow:none}
  .fact:nth-child(n+3){box-shadow:0 -1px 0 var(--rule)}
  .fact:nth-child(4){box-shadow:0 -1px 0 var(--rule),-1px 0 0 var(--rule)}
}

/* ---------- generic section ---------- */
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.section--alt{background:var(--paper)}
.section--dark{background:var(--olive-deep);color:#EDE8DC}
.section--dark h2,.section--dark h3{color:var(--paper)}
.section--dark a{color:var(--paper)}
.section__head{max-width:62ch;margin-bottom:2.5rem}

/* ---------- use-case blocks ---------- */
.use{
  display:grid;grid-template-columns:.95fr 1.05fr;
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--rule);
  scroll-margin-top:96px;
}
.use:first-of-type{border-top:0}
.use__fig{margin:0}
.use__fig img{width:100%;height:min(60vh,540px);object-fit:cover;
  object-position:50% 55%;border-radius:2px}
.use--flip .use__fig{order:2}
.use ul{margin:0 0 1.2em;padding-left:1.1em}
.use li{margin-bottom:.35em}
.use__price{
  font-family:var(--display);font-weight:700;
  font-size:1.05rem;letter-spacing:.02em;color:var(--brick);
  border-top:1px solid var(--rule);padding-top:.9rem;margin-top:0;
}
@media (max-width:860px){
  .use{grid-template-columns:1fr}
  .use--flip .use__fig{order:0}
  .use__fig img{height:min(44vh,320px)}
}

/* ---------- two-column include/exclude ---------- */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
@media (max-width:760px){.cols{grid-template-columns:1fr}}
.panel{background:var(--paper);border:1px solid var(--rule);padding:clamp(1.4rem,3vw,2rem);border-radius:2px}
.panel--plain{background:transparent}
.ticks,.crosses{list-style:none;margin:0;padding:0}
.ticks li,.crosses li{position:relative;padding-left:1.7rem;margin-bottom:.55em}
.ticks li::before{content:"";position:absolute;left:0;top:.52em;width:.85rem;height:.45rem;
  border-left:2px solid var(--olive);border-bottom:2px solid var(--olive);transform:rotate(-45deg)}
.crosses li::before{content:"—";position:absolute;left:0;top:0;color:var(--brick);font-weight:700}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:3/4;object-fit:cover;
  object-position:50% 62%;border-radius:2px}
.gallery figcaption{font-size:.84rem;opacity:.75;margin-top:.45rem;line-height:1.45}
.gallery--wide{grid-template-columns:1fr;margin:0}
.gallery--wide img{aspect-ratio:auto}
@media (max-width:760px){.gallery{grid-template-columns:1fr 1fr;gap:.6rem}}
@media (max-width:420px){.gallery{grid-template-columns:1fr}}

/* ---------- spec table ---------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.98rem}
caption{text-align:left;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;color:var(--olive);
  padding-bottom:.7rem}
th,td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--rule);vertical-align:top}
th{font-family:var(--display);font-weight:700;color:var(--olive-deep);white-space:nowrap}
tbody th{font-weight:700}
td strong{color:var(--olive-deep)}

/* ---------- rate card ---------- */
.rates{width:100%;border-collapse:collapse}
.rates th,.rates td{padding:1rem .9rem;border-bottom:1px solid var(--rule)}
.rates .rate{font-family:var(--display);font-weight:700;font-size:1.25rem;
  color:var(--olive-deep);white-space:nowrap}
.rates .terms{font-size:.92rem;opacity:.8}
.rates tr:last-child th,.rates tr:last-child td{border-bottom:0}

/* ---------- room card ---------- */
.roomcard{
  display:grid;grid-template-columns:.8fr 1.2fr;gap:0;
  background:var(--paper);border:1px solid var(--rule);border-radius:2px;overflow:hidden;
}
.roomcard img{width:100%;height:100%;min-height:280px;object-fit:cover}
.roomcard__body{padding:clamp(1.5rem,3.5vw,2.5rem)}
@media (max-width:760px){
  .roomcard{grid-template-columns:1fr}
  .roomcard img{min-height:0;aspect-ratio:3/2}
}

/* ---------- CTA band ---------- */
.cta{background:var(--brick);color:#FBF7EF;text-align:center}
.cta h2{color:#fff}
.cta p{margin-inline:auto;color:#F6EFE5}
.cta .btn-row{justify-content:center}

/* ---------- form ---------- */
.form{display:grid;gap:1.1rem;max-width:620px}
.field{display:grid;gap:.35rem}
.field label{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;font-size:.76rem;color:var(--olive-deep);
}
.field .hint{font-size:.85rem;opacity:.72;font-family:var(--body);
  font-weight:400;text-transform:none;letter-spacing:0}
input,select,textarea{
  font-family:var(--body);font-size:1rem;color:var(--ink);
  background:var(--paper);border:1px solid rgba(34,31,26,.35);
  border-radius:2px;padding:.7rem .8rem;width:100%;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--olive);outline-offset:1px;border-color:var(--olive);
}
textarea{min-height:130px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:560px){.field-row{grid-template-columns:1fr}}
.hp{position:absolute;left:-9999px}

/* ---------- contact detail list ---------- */
.detail{list-style:none;margin:0;padding:0}
.detail li{margin-bottom:1.1rem}
.detail dt,.detail .k{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.12em;font-size:.73rem;color:var(--olive);margin-bottom:.15rem
}

/* ---------- footer ---------- */
.site-foot{background:var(--ground-deep);border-top:1px solid var(--rule);font-size:.92rem}
.site-foot__in{padding-block:2.5rem 2rem;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:2rem}
.site-foot h3{font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;color:var(--olive-deep)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.4rem}
.site-foot a{text-decoration:none}
.site-foot a:hover{text-decoration:underline}
.site-foot__legal{
  border-top:1px solid var(--rule);padding-block:1.1rem
  calc(1.1rem + env(safe-area-inset-bottom,0px));
  font-size:.84rem;opacity:.78;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.site-foot__legal p{margin:0;max-width:none}
@media (max-width:760px){.site-foot__in{grid-template-columns:1fr;gap:1.6rem}}

.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gutter);top:.5rem;z-index:100;background:var(--paper);
  padding:.6rem 1rem;border:2px solid var(--olive-deep)}

/* opening-date note under the hero lede and the pricing intro */
.hero__note{margin:1rem 0 0;font-size:.9rem;font-weight:600;color:var(--olive-deep)}
.lede-note{margin:1rem 0 0;padding:.7rem .9rem;border-left:3px solid var(--star);
  background:var(--ground-warm);font-size:.95rem}
.lede-note strong{color:var(--olive-deep)}

/* rate summary on the room page, and the price-structure note on /pricing/ */
.ratesum{font-size:1rem;line-height:1.7;margin:0 0 .8rem}
.anchor-note{font-size:.95rem;line-height:1.65;margin:0 0 1.2rem;padding:.85rem 1rem;
  border-left:3px solid var(--olive);background:var(--ground-warm)}
#faq h3{margin:1.7rem 0 .35rem;font-size:1.08rem}
#faq h3:first-of-type{margin-top:1.1rem}

/* visible focus on everything, not just form fields - the default ring is
   nearly invisible against the red booking button */
a:focus-visible,.btn:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--olive-deep);outline-offset:2px;border-radius:2px}
.btn--book:focus-visible{outline-color:var(--ink)}

/* keeps a table caption for screen readers where a visible <h2> already
   names the table, so sighted users don't read the same words twice */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}