:root{
  --bg: rgb(255, 252, 240);
  --fg: #100F0F;
  --muted: rgba(11,15,22,.70);
  --dim: rgba(11,15,22,.45);
  --line: rgba(11,15,22,.14);

  --ok:#0aa84f;
  --med:#b27700;
  --hi:#c61b2a;

  --pad: clamp(25px, 3vw, 40px);
  --gap: clamp(10px, 1.4vw, 16px);

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --h0: clamp(30px, 3.2vw, 45px);
  --h1: clamp(18px, 1.8vw, 28px);
  --h2: clamp(14px, 1.25vw, 18px);
  --h3: clamp(12px, 1.05vw, 16px);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--mono);
  color: var(--fg);
  background: var(--bg);
  letter-spacing:.2px;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.wrap{
  min-height:95vh;
  padding: var(--pad);
  display:grid;
  grid-template-rows: auto 1fr;
  gap: var(--gap);
}

.place{
  display:inline-block;
  font-size: var(--h1);
  font-weight: 900;
  cursor:pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  padding-bottom: 2px;
  user-select:none;
  white-space:nowrap;
}
.place:hover{ text-decoration-style: solid; }

main{
  grid-template-columns: 1fr;
  gap: var(--gap);
  min-height:0;
  align-items:start;
}

.tabs{
  display:flex;
  gap: 16px;
  padding: 12px 0 6px;
  border-bottom: 1px solid rgba(11,15,22,.14);
  margin-bottom: 12px;
}
.tab{
  font-family: inherit;
  font-weight: 900;
  font-size: clamp(14px, 1.2vw, 18px);
  background: transparent;
  border: 0;
  padding: 6px 2px 10px;
  cursor:pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 6px;
  opacity: .55;
}
.tab:hover{ opacity: .85; text-decoration-style: solid; }
.tab.active{ opacity: 1; }

.view{ display:none; }
.view.show{ display:block; }

.panel{
  font-size: var(--h1);
  padding-top: 5px;
  min-height:0;
}

.label{
  font-size: var(--h2);
  color: var(--dim);
  font-weight: 900;
  letter-spacing: .6px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.nowLine{
  font-size: var(--h0);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.2px;
  margin: 0;
  max-width: 65ch;
}

.nextLine{
  font-size: var(--h1);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  max-width: 105ch;
}

.nextLine::first-letter{
  text-transform: uppercase;
}

.sig{ font-weight: 900; }
.ok{ color: var(--ok); }
.med{ color: var(--med); }
.hi{ color: var(--hi); }

.listLine{
  font-size: var(--h1);
  font-weight: 500;
  line-height: 1.25;
  max-width: 115ch;
}
.listLine .dim{ color: var(--dim); font-weight: 500; }

.listLine::first-letter{
  text-transform: uppercase;
}

.weekSentence{
  font-size: --var(h3);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 8px;
}

.weekSentence::first-letter {
text-transform:uppercase;
}


.weekSub{
  font-size: --var(h3);
  font-weight: 500;
  line-height: 1.35;
  margin-top: 6px;
}

.weekSub::first-letter {
text-transform:uppercase;
}

.weekSub::first-letter{
  text-transform: uppercase;
}

/* Week grid */
.weekGrid{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin-top: 10px;
}

.weekMini{
  border: 1px solid rgba(11,15,22,.14);
  border-radius: 14px;
  padding: 12px;
  cursor:pointer;
  user-select:none;
}
.weekMini:hover{ border-color: rgba(11,15,22,.28); }

.weekMini.active{
  background: rgba(11,15,22,.08);
  border-color: rgba(11,15,22,.35);
}

.weekMiniTop{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.weekMiniDay{ font-weight: 500; font-size: --var(h2); }
.weekMiniHiLo{ font-weight: 500; color: rgba(11,15,22,.65); font-size: --var(h3); }
.weekMiniLine{ font-weight: 500; font-size: --var(h3); line-height: 1.25; color: rgba(11,15,22,.75); }

.weekDetail{
  margin-top: 12px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.weekDetailHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.weekDetailTitle{
  font-weight: 900;
  font-size: --var(h2);
}

@media (max-width: 980px){
  .weekGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .weekGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.weekendGrid2{
  display:grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.weekendCard{
  padding:14px;
  padding-right: 50px;
  border: 1px solid rgba(11,15,22,.14);
  border-radius: 14px;
}

@media (max-width: 980px){
  .weekendGrid2{ grid-template-columns: 1fr; }
}

/* Search overlay */
.overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.20);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding: 18vh var(--pad) 18vh;
}
.overlay.show{display:flex;}
.modal{
  width: min(80%, 100%);
  border: 1px solid var(--line);
  background: #fff;
  padding: 14px;

}
.modal .row{display:flex; gap: 10px; align-items:center;}
.modal input{
  width: 100%;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--h1);
  padding: 10px 10px;
  outline:none;
   min-height: 200px;
}
.modal button{
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--h1);
  padding: 10px 12px;
  cursor:pointer;
  white-space:nowrap;
  min-height: 200px;
}
.hint{margin-top: 10px; color: var(--dim); font-size: var(--h3);}

a{
  color: inherit;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  font-weight: 900;
}
a:hover{ text-decoration-style: solid; }

a:not([href^="#"]):not([href^="/"]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2.5' stroke='gray' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25' /%3E%3C/svg%3E%0A");
  background-position: right 33%;
  background-repeat: no-repeat;
  background-size: .7em;
  padding-right: .75em;