/* Holdyard — an airport parking desk in Milwaukee.

   Archetype: the worksheet. The catalogue is a ruled worksheet of confirmation lines, each one
   filed under the side that answers it: the operator, this desk, or nobody. A line carries a small
   square in the left margin that is filled, half filled or empty, and the state is also written in
   words beside it, because colour and shape are never the only carrier.

   The booking form's request checklist is the only real checkbox markup on the site. The claims
   matrix deliberately does NOT reuse the state squares: heronjunction already makes its two state
   classes do double duty as claims markers, so here the matrix carries words instead.

   Palette Bond Paper. No hero image. One column. No floating control. */

@font-face{font-family:"Bond";src:url("/assets/font/bond-500.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Bond";src:url("/assets/font/bond-700.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Read";src:url("/assets/font/read-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Read";src:url("/assets/font/read-600.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --hy-paper:#eae7e0; --hy-dim:#dcd8cf; --hy-card:#f8f6f1;
  --hy-ink:#1e1f22; --hy-deep:#0c0d10; --hy-muted:#63646a;
  --hy-slate:#265a5c; --hy-brass:#8d6a2b; --hy-hair:#c9c5bb;
  --hy-good:#37684a; --hy-bad:#8b3128;
  --hy-face:"Bond",Georgia,serif;
  --hy-text:"Read","Helvetica Neue",Arial,sans-serif;
  --hy-hold:44rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hy-paper);color:var(--hy-ink);
  font-family:var(--hy-text);font-size:1.02rem;line-height:1.51;overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--hy-slate);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--hy-brass)}
:focus-visible{outline:2px solid var(--hy-brass);outline-offset:2px}

.hy-skip{position:absolute;left:-9999px}
.hy-skip:focus{position:static;display:inline-block;margin:.5rem;padding:.4rem .7rem;
  background:var(--hy-ink);color:var(--hy-card)}
.hy-hold{max-width:var(--hy-hold);margin:0 auto;padding:0 1.15rem}

/* --- masthead. The independence line sits here, on the first screen, at reading size. --- */

.hy-mast{background:var(--hy-card);border-bottom:2px solid var(--hy-ink);padding:1.4rem 0 0}
.hy-word{display:block;text-decoration:none;color:inherit}
.hy-word-name{display:block;font-family:var(--hy-face);font-weight:700;font-size:1.66rem;
  line-height:1.1;letter-spacing:-.01em}
.hy-word-say{display:block;font-size:.9rem;color:var(--hy-muted);margin-top:.15rem}
.hy-tel{display:inline-block;margin-top:.6rem;font-family:var(--hy-face);font-weight:700;
  font-size:1.12rem;text-decoration:none;color:var(--hy-ink)}
.hy-tel span{display:block;font-family:var(--hy-text);font-weight:400;font-size:.82rem;
  color:var(--hy-muted)}
.hy-free{margin:.9rem 0 0;padding:.6rem .75rem;background:var(--hy-paper);
  border-left:4px solid var(--hy-brass);font-size:.95rem}
.hy-nav{margin:1rem 0 0;padding:0 0 1rem;list-style:none;display:flex;flex-wrap:wrap;
  gap:.15rem 1.05rem}
.hy-nav a{font-size:.9rem;color:var(--hy-muted);text-decoration:none}
.hy-nav a:hover,.hy-nav a[aria-current]{color:var(--hy-ink);text-decoration:underline}

/* --- the page --- */

main{display:block;padding:1.9rem 0 0}
.hy-brow{font-size:.82rem;letter-spacing:.13em;text-transform:uppercase;color:var(--hy-brass);
  margin:0 0 .4rem;font-weight:600}
h1{font-family:var(--hy-face);font-weight:700;font-size:1.98rem;line-height:1.16;margin:0}
.hy-stand{font-size:1.08rem;color:var(--hy-muted);margin:.8rem 0 0}
.hy-sec{margin-top:1.9rem}
h2{font-family:var(--hy-face);font-weight:700;font-size:1.3rem;line-height:1.24;margin:0 0 .5rem}
h3{font-weight:600;font-size:1.02rem;margin:1.2rem 0 .3rem}
p{margin:0 0 .85rem}
ul,ol{margin:0 0 .85rem;padding-left:1.15rem}
li{margin-bottom:.32rem}
blockquote{margin:1rem 0;padding:.5rem .85rem;background:var(--hy-card);
  border-left:4px solid var(--hy-slate);color:var(--hy-ink)}
strong{font-weight:600;color:var(--hy-deep)}
code{font-family:var(--hy-face);background:var(--hy-dim);padding:.05em .25em}

/* --- the worksheet: the signature. A ruled sheet of confirmation lines. --- */

.hy-group{margin:2rem 0 0;padding:.45rem .7rem;background:var(--hy-ink);color:var(--hy-card)}
.hy-group h2{margin:0;font-size:1.06rem;color:var(--hy-card)}
.hy-group p{margin:.15rem 0 0;font-size:.87rem;color:var(--hy-dim)}

.hy-sheet{margin:0;padding:0;list-style:none;border-top:1px solid var(--hy-ink)}
.hy-sheet li{margin:0;padding:0;border-bottom:1px solid var(--hy-hair);background:var(--hy-card)}
.hy-sheet li::before{display:none}
.hy-line{display:grid;grid-template-columns:1.6rem minmax(0,1fr);gap:.75rem;
  padding:.75rem .8rem;text-decoration:none;color:inherit;align-items:start}
.hy-line:hover{background:#fff}
/* the square: filled, half filled, empty. Shape and fill, plus words beside it. */
.hy-mark{width:1rem;height:1rem;margin-top:.18rem;border:2px solid var(--hy-ink)}
.hy-mark.is-full{background:var(--hy-ink)}
.hy-mark.is-half{background:linear-gradient(135deg,var(--hy-ink) 50%,transparent 50%)}
.hy-mark.is-none{background:var(--hy-card)}
.hy-line-name{display:block;font-family:var(--hy-face);font-weight:700;font-size:1.06rem;
  line-height:1.2}
.hy-line-who{display:block;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--hy-muted);margin-top:.15rem;font-weight:600}
.hy-line-say{display:block;font-size:.92rem;color:var(--hy-muted);margin-top:.35rem}

/* the four fields inside a clause page */
.hy-four{margin:1.3rem 0 0;border-top:2px solid var(--hy-ink)}
.hy-four>div{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:.85rem;
  padding:.6rem 0;border-bottom:1px solid var(--hy-hair)}
.hy-four dt{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--hy-muted);margin:0;font-weight:600}
.hy-four dd{margin:0;font-size:.97rem}

/* --- the claims matrix. Words, not the state squares. --- */

.hy-claims{margin:1.4rem 0 0;padding:0;list-style:none;border-top:2px solid var(--hy-ink)}
.hy-claims li{margin:0;padding:.7rem .8rem;border-bottom:1px solid var(--hy-hair);
  background:var(--hy-card)}
.hy-claims li::before{display:none}
.hy-claim-head{display:flex;flex-wrap:wrap;gap:.55rem;align-items:baseline}
.hy-claim-head b{font-family:var(--hy-face);font-size:1.02rem}
.hy-said{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.08rem .4rem;border:1px solid currentColor}
.hy-said.hy-yes{color:var(--hy-good)}
.hy-said.hy-no{color:var(--hy-bad)}
.hy-claims p{margin:.35rem 0 0;font-size:.92rem;color:var(--hy-muted)}
.hy-claims p b{color:var(--hy-ink);font-weight:600}

/* --- doors --- */

.hy-doors{margin:2rem 0 0;padding:0;list-style:none;border-top:2px solid var(--hy-ink)}
.hy-doors li{border-bottom:1px solid var(--hy-hair);margin:0;padding:0}
.hy-doors li::before{display:none}
.hy-doors a{display:block;padding:.68rem 0;text-decoration:none;color:inherit}
.hy-doors a:hover{background:var(--hy-dim)}
.hy-doors b{display:block;font-family:var(--hy-face);font-weight:700;font-size:1.01rem}
.hy-doors span{display:block;font-size:.9rem;color:var(--hy-muted);margin-top:.1rem}

/* --- figures, tables --- */

figure{margin:1.4rem 0 0}
figure img{border:1px solid var(--hy-hair)}
figcaption{font-size:.88rem;color:var(--hy-muted);margin-top:.4rem;padding-left:.7rem;
  border-left:3px solid var(--hy-brass)}

.hy-scroll{overflow-x:auto;margin:1.1rem 0 0;border:1px solid var(--hy-hair)}
table{border-collapse:collapse;width:100%;font-size:.93rem;background:var(--hy-card)}
th,td{text-align:left;padding:.52rem .68rem;border-bottom:1px solid var(--hy-hair);
  vertical-align:top}
th{font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;background:var(--hy-dim);
  white-space:nowrap;font-weight:600}
tr:last-child td{border-bottom:0}

/* --- questions --- */

.hy-ask h2{font-size:1.08rem;font-family:var(--hy-text);font-weight:600;
  border-top:1px solid var(--hy-hair);padding-top:.85rem;margin-top:1.5rem}

/* --- forms --- */

.hy-form{margin:1.5rem 0 0;background:var(--hy-card);border:2px solid var(--hy-ink);
  padding:1.05rem 1rem 1.15rem}
.hy-grid{display:grid;gap:.8rem}
.hy-two{display:grid;gap:.8rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.hy-field label{display:block;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--hy-muted);margin-bottom:.2rem;font-weight:600}
.hy-field input,.hy-field select,.hy-field textarea{width:100%;font:inherit;font-size:.97rem;
  padding:.46rem .55rem;background:var(--hy-paper);color:var(--hy-ink);
  border:1px solid var(--hy-muted);border-radius:0}
.hy-field.is-void input,.hy-field.is-void select,.hy-field.is-void textarea{
  border-color:var(--hy-bad);background:#fdf6f5}
.hy-void{margin:.25rem 0 0;font-size:.85rem;color:var(--hy-bad)}
.hy-trap{position:absolute;left:-9999px}

/* the request checklist: the one place with real checkbox markup */
.hy-asks{margin:1.15rem 0 0;padding:.75rem .8rem;background:var(--hy-paper);
  border:1px solid var(--hy-hair)}
.hy-asks h3{margin:0 0 .15rem;font-size:.95rem}
.hy-asks>p{margin:0 0 .6rem;font-size:.87rem;color:var(--hy-muted)}
.hy-asks ul{list-style:none;margin:0;padding:0}
.hy-asks li{margin:0 0 .45rem;padding:0}
.hy-asks label{display:grid;grid-template-columns:1.1rem minmax(0,1fr);gap:.6rem;
  font-size:.93rem;align-items:start;cursor:pointer}
.hy-asks input[type=checkbox]{margin:.22rem 0 0;width:1.1rem;height:1.1rem;accent-color:var(--hy-slate)}
.hy-asks small{display:block;color:var(--hy-muted);font-size:.83rem;margin-top:.1rem}
.hy-tally{margin:.7rem 0 0;font-family:var(--hy-face);font-weight:700;font-size:.95rem}

.hy-go{margin:1.05rem 0 0}
.hy-go button{font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  padding:.62rem 1.15rem;border:0;cursor:pointer;background:var(--hy-ink);color:var(--hy-card)}
.hy-go button:hover{background:var(--hy-slate)}
.hy-go button[disabled]{background:var(--hy-muted);cursor:default}
.hy-tiny{font-size:.85rem;color:var(--hy-muted);margin:.75rem 0 0}
.hy-else{margin:.65rem 0 0;font-size:.9rem;color:var(--hy-bad)}

/* --- the storage card, in the flow above the footer --- */

.hy-note{margin:2.4rem 0 0;background:var(--hy-card);border:2px solid var(--hy-ink);
  padding:.9rem 1rem}
.hy-note p{margin:0 0 .65rem;font-size:.92rem}
.hy-note-go{display:flex;gap:.55rem;flex-wrap:wrap}
.hy-note-go button{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  padding:.4rem .8rem;cursor:pointer;background:var(--hy-ink);color:var(--hy-card);
  border:0;font-weight:600}
.hy-note-go button+button{background:none;color:var(--hy-ink);border:1px solid var(--hy-muted)}

/* --- footer --- */

footer{margin-top:2.6rem;border-top:2px solid var(--hy-ink);background:var(--hy-card);
  padding:1.6rem 0 1.9rem}
.hy-foot{display:grid;gap:1.3rem;grid-template-columns:minmax(0,1fr)}
.hy-foot h2{font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--hy-muted);margin:0 0 .4rem;font-family:var(--hy-text);font-weight:600}
.hy-foot ul{list-style:none;margin:0;padding:0}
.hy-foot li{margin-bottom:.26rem}
.hy-foot a{font-size:.92rem;color:var(--hy-ink)}
.hy-imprint{font-size:.9rem;line-height:1.48}
.hy-imprint b{display:block;font-family:var(--hy-face);font-weight:700;font-size:1rem;
  margin-bottom:.28rem}
.hy-rule{margin:1.5rem 0 0;padding-top:.95rem;border-top:1px solid var(--hy-hair);
  font-size:.87rem;color:var(--hy-muted)}
.hy-rule b{font-weight:600;color:var(--hy-ink)}

/* --- reveal --- */

.hy-rise{opacity:1}
.hy-js .hy-rise{opacity:0;transform:translateY(6px);
  transition:opacity .4s ease,transform .4s ease}
.hy-js .hy-rise.is-seen{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hy-js .hy-rise{opacity:1;transform:none;transition:none}
}

/* --- narrow --- */

@media (max-width:44rem){
  h1{font-size:1.7rem}
  .hy-two{grid-template-columns:minmax(0,1fr)}
  .hy-four>div{grid-template-columns:minmax(0,1fr);gap:.12rem}
}
@media (min-width:58rem){
  .hy-foot{grid-template-columns:1.5fr 1fr 1fr}
}

/* the availability check on the opening screen of the home page, module 2.2 */
.hy-check{border:2px solid var(--hy-ink,#241f1b);background:var(--hy-card,#fbf9f4);
  padding:1rem 1.05rem 1.1rem;margin:1.3rem 0 1.6rem}
.hy-check h2{font-size:1.15rem;margin:0 0 .75rem}
.hy-check .hy-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem .8rem}
.hy-check .hy-go{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;margin:.9rem 0 0}
.hy-check .hy-free{font-size:.86rem;color:var(--hy-quiet,#55504a);
  margin:0;padding:0;background:none;border:0}
/* the shared .hy-said is a bordered pill used as a yes/no marker elsewhere; here it is a
   sentence, and an empty one must not draw a box */
.hy-check .hy-said{font-size:.9rem;letter-spacing:0;text-transform:none;font-weight:400;
  padding:0;border:0;margin:.55rem 0 0;display:block}
.hy-check .hy-said:empty{margin:0}
.hy-check .hy-said[data-tone="bad"]{color:var(--hy-bad,#9d2f22)}
@media (max-width:34rem){.hy-check .hy-two{grid-template-columns:1fr}}