/* ============================================================
   MetMary — meteorological tools
   Design system. Paper, ink, hairline rules.
   Signature device: the labelled contour — a hairline rule
   interrupted by its value, the way an isobar carries its
   pressure on a synoptic chart.
   ============================================================ */

:root{
  /* --- ink & paper, sampled from the MetMary wordmark --- */
  --paper:      #E7EBE8;   /* chart stock */
  --paper-deep: #DDE3E0;   /* recessed field */
  --ink:        #0A1730;   /* wordmark navy */
  --ink-2:      #2E5478;   /* wordmark slate   6.6:1 */
  --ink-3:      #4F6373;   /* marginalia       5.2:1 */
  --rule:       #B9C4C1;   /* hairline */
  --rule-soft:  #CBD3D0;
  --accent:     #006C74;   /* wave teal, darkened for text  5.1:1 */
  --accent-lit: #00A3AD;   /* wave teal as drawn in the mark */
  --tool:      #080F16;   /* the observation tool */

  /* --- type --- */
  --display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ui: "Archivo", "Segoe UI", system-ui, sans-serif;
  --data: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* --- measure --- */
  --sheet: 78rem;
  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --margin-col: 10.5rem;   /* the marginalia column */
  --hair: 1px;
}

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

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--ui);
  font-size:16px;
  line-height:1.5;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; height:auto; display:block }

a{ color:inherit }

::selection{ background:var(--accent-lit); color:#03181A }

:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:1px;
}

/* ------------------------------------------------------------
   Sheet — the editorial grid.
   A narrow marginalia column carries every piece of metadata;
   the wide column carries the content. Nothing is in a card.
   ------------------------------------------------------------ */
.sheet{
  width:100%;
  max-width:var(--sheet);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.grid{
  display:grid;
  grid-template-columns:[margin] var(--margin-col) [main] minmax(0,1fr);
  column-gap:clamp(1.5rem,3vw,3rem);
}
@media (max-width:56rem){
  .grid{ grid-template-columns:minmax(0,1fr) }
}

/* ------------------------------------------------------------
   Notation — mono metadata, set like instrument type
   ------------------------------------------------------------ */
.note-type{
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:400;
  line-height:1.5;
}
.note-type--ink{ color:var(--ink) }

/* ------------------------------------------------------------
   SIGNATURE — the labelled contour.
   A hairline that breaks to admit its own label.
   ------------------------------------------------------------ */
.contour{
  display:flex;
  align-items:center;
  gap:.9rem;
  margin:0;
  border:0;
  color:var(--ink-3);
}
.contour::before,
.contour::after{
  content:"";
  height:var(--hair);
  background:var(--rule);
  flex:1 1 auto;
}
.contour::before{ flex-grow:var(--lead, 0) ; min-width:0 }
.contour > *{ flex:0 0 auto }
.contour--flush::before{ display:none }

/* a contour that carries a value on the left, like a labelled isobar */
.contour__label{
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  white-space:nowrap;
}

/* ------------------------------------------------------------
   Masthead
   ------------------------------------------------------------ */
.masthead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.5rem;
  padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1rem,2vw,1.5rem);
  border-bottom:2px solid var(--ink);
}
.masthead__id{ display:inline-block; line-height:0 }
.masthead__id img{
  width:auto;
  height:clamp(40px,6.4vw,78px);
}
a.masthead__id:focus-visible{ outline-offset:6px }

.masthead__nav{
  display:flex;
  align-items:baseline;
  gap:clamp(1rem,2.5vw,2rem);
  padding-bottom:.35rem;
}
.masthead__nav a{
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  text-decoration:none;
  padding-bottom:.25rem;
  border-bottom:var(--hair) solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.masthead__nav a:hover{ color:var(--ink); border-bottom-color:var(--ink) }
.masthead__nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--rule) }

/* ------------------------------------------------------------
   Index of tools
   ------------------------------------------------------------ */
.contents{ padding-block:.75rem 0 }

.tools{
  list-style:none;
  margin:0;
  padding:0;
}
.tool{ border-bottom:var(--hair) solid var(--rule) }
.tool:first-child{ border-top:var(--hair) solid var(--rule) }

/* --- catalogue rows: metadata, name, figure, link --- */
.tool__link{
  display:grid;
  grid-template-columns:[margin] var(--margin-col) [main] minmax(0,1fr) [thumb] 12rem [go] 2rem;
  column-gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
  padding-block:clamp(2.5rem,5vw,4rem);
  text-decoration:none;
  color:inherit;
  transition:background-color .2s ease;
}
.tool__link:hover{ background:var(--paper-deep) }

.tool__no{
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  line-height:1.5;
  color:var(--ink);
  display:block;
}
.tool__margin{ display:flex; flex-direction:column; gap:.35rem }

.tool__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2.5rem,6vw,4.75rem);
  line-height:1;
  letter-spacing:-.022em;
  margin:0;
  color:var(--ink);
  text-wrap:balance;
}
.tool__title em{ font-style:italic; font-weight:300; color:var(--ink-2) }

.tool__go{ justify-self:end; color:var(--ink-3); transition:transform .3s cubic-bezier(.2,.7,.3,1), color .2s ease }
.tool__link:hover .tool__go,
.tool__link:focus-visible .tool__go{ transform:translateX(5px); color:var(--accent) }

/* the figure: real isobars, drawn from the tool's own field */
.engraving{
  margin:0;
  width:100%;
  aspect-ratio:1 / .8;
  color:var(--ink);
}
.engraving svg{ width:100%; height:100%; display:block }

@media (max-width:56rem){
  .tool__link{
    grid-template-columns:minmax(0,1fr) 10rem;
    row-gap:.9rem;
  }
  .tool__margin{
    grid-column:1 / -1;
    flex-direction:row; flex-wrap:wrap; gap:.3rem 1.1rem;
  }
  .tool__go{ display:none }
  .engraving{ grid-column:2; grid-row:2 }
  .tool__title{ grid-column:1; grid-row:2 }
}

/* ------------------------------------------------------------
   Tool page — title block
   ------------------------------------------------------------ */
.tool-head{ padding-block:clamp(2rem,4.5vw,3.5rem) clamp(1.5rem,3vw,2.25rem) }
.tool-head__margin{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding-top:.65rem;
}
@media (max-width:56rem){
  .tool-head__margin{ flex-direction:row; flex-wrap:wrap; gap:.35rem 1.1rem; padding:0 0 1rem }
}
.tool-head__title{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-weight:400;
  font-size:clamp(2.7rem,7vw,5.6rem);
  line-height:.9;
  letter-spacing:-.024em;
  margin:0;
  text-wrap:balance;
}
.tool-head__title em{ font-style:italic; font-weight:300; color:var(--ink-2) }
.tool-head__lede{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:clamp(1.1rem,1.8vw,1.4rem);
  line-height:1.4;
  color:var(--ink-2);
  margin:1rem 0 0;
  max-width:44ch;
}

/* ------------------------------------------------------------
   Figure — the tool itself
   ------------------------------------------------------------ */
.figure{ margin:0 }
.figure__frame{
  position:relative;
  background:var(--tool);
  border:var(--hair) solid var(--ink);
  overflow:hidden;
}
.figure__foot{
  display:flex;
  justify-content:flex-end;
  padding-top:.75rem;
}
.figure__caption{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:.9375rem;
  line-height:1.45;
  color:var(--ink-3);
  margin:0;
  max-width:62ch;
}
.figure__caption b{
  font-style:normal;
  font-family:var(--data);
  font-weight:400;
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink);
  margin-right:.5rem;
}
.figure__tools{ display:flex; gap:.75rem; flex:0 0 auto }
.plainbtn{
  appearance:none;
  background:none;
  border:0;
  border-bottom:var(--hair) solid var(--rule);
  padding:0 0 .2rem;
  cursor:pointer;
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .18s ease, border-color .18s ease;
}
.plainbtn:hover{ color:var(--ink); border-bottom-color:var(--ink) }

/* ------------------------------------------------------------
   Note — the instructor's own text, set as editorial matter
   ------------------------------------------------------------ */
.note{ padding-block:clamp(2.25rem,5vw,4rem) }
.note__margin{ padding-top:.35rem }
.note__body{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  gap:clamp(1.75rem,3.5vw,3rem);
  max-width:64rem;
}
.note__body h3{
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-weight:400;
  margin:0 0 .5rem;
}
.note__body h3 + p{ margin-top:0 }
.note__item > :last-child{ margin-bottom:0 }
.note__body p{
  font-family:var(--display);
  font-weight:300;
  font-size:1.0625rem;
  line-height:1.58;
  color:var(--ink);
  margin:0 0 1.75rem;
}
.note__body p:last-child{ margin-bottom:0 }
.note__body i{ color:var(--ink-2) }
.note__body b{ font-weight:500 }
.key{
  display:inline-block;
  min-width:1.5em;
  text-align:center;
  padding:.1em .4em;
  margin-right:.15em;
  font-family:var(--data);
  font-size:.75rem;
  color:var(--ink);
  border:var(--hair) solid var(--rule);
  background:var(--paper-deep);
  line-height:1.35;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.foot{
  padding-block:1.5rem clamp(2rem,4vw,3rem);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.foot__mark{ display:flex; align-items:center; gap:.7rem }
.foot__mark img{ width:26px; height:26px; opacity:.9 }

/* ------------------------------------------------------------
   Skip link
   ------------------------------------------------------------ */
.skip{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:50;
  background:var(--ink);
  color:var(--paper);
  padding:.7rem 1.1rem;
  font-family:var(--data);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
}
.skip:focus{ left:.75rem; top:.75rem }

.visually-hidden{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* ------------------------------------------------------------
   Motion
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

/* ------------------------------------------------------------
   Sections
   ------------------------------------------------------------ */
.section{ padding-block:clamp(2rem,4vw,3.25rem) clamp(2.5rem,5vw,4rem) }
.section:last-of-type{ padding-bottom:clamp(2rem,4vw,3.5rem) }

.section__head{
  display:flex;
  align-items:center;
  gap:1.25rem;
  margin-bottom:.75rem;
}
.section__head .contour{ flex:1 1 auto; min-width:0 }

.viewtoggle{ display:flex; flex:0 0 auto; border:var(--hair) solid var(--rule) }
.viewtoggle button{
  appearance:none;
  background:none;
  border:0;
  border-right:var(--hair) solid var(--rule);
  padding:.5rem .85rem;
  cursor:pointer;
  font-family:var(--data);
  font-size:.6875rem;
  letter-spacing:.155em;
  text-transform:uppercase;
  color:var(--ink-3);
  transition:color .18s ease, background-color .18s ease;
}
.viewtoggle button:last-child{ border-right:0 }
.viewtoggle button:hover{ color:var(--ink) }
.viewtoggle button[aria-pressed="true"]{ background:var(--ink); color:var(--paper) }

.empty{
  font-family:var(--display);
  font-style:italic;
  font-weight:300;
  font-size:1.0625rem;
  color:var(--ink-3);
  margin:0;
  padding-block:clamp(1.75rem,3.5vw,2.75rem);
}

/* ------------------------------------------------------------
   Grid view — each tool as a dark tile, on the same ground its
   figure sits on inside the tool itself.
   Tiles are capped so a short index reads as a deliberate row
   rather than a mostly-empty grid.
   ------------------------------------------------------------ */
.tools[data-view="grid"]{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));
  gap:clamp(1rem,1.8vw,1.5rem);
  border:0;
}
.tools[data-view="grid"] .tool{ border:0; max-width:30rem }
.tools[data-view="grid"] .tool__link{
  --paper:#080F16;
  --accent:var(--accent-lit);
  display:flex;
  flex-direction:column;
  height:100%;
  padding:0;
  background:#080F16;
  border:var(--hair) solid var(--ink);
  color:#E9F3F8;
  transition:border-color .2s ease, background-color .2s ease;
}
.tools[data-view="grid"] .tool__link:hover{ background:#0C1721; border-color:var(--accent-lit) }
.tools[data-view="grid"] .engraving{
  order:-1;
  width:100%;
  aspect-ratio:4 / 3;
  color:#E9F3F8;
  border-bottom:var(--hair) solid #1D3040;
}
.tools[data-view="grid"] .tool__margin{
  order:1;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.25rem .8rem;
  padding:1.05rem 1.15rem .1rem;
}
.tools[data-view="grid"] .tool__no{ color:#E9F3F8 }
.tools[data-view="grid"] .note-type{ color:#9FB3C0 }
.tools[data-view="grid"] .tool__title{
  order:2;
  color:#E9F3F8;
  font-size:clamp(1.6rem,2.3vw,2rem);
  line-height:1.02;
  padding:.45rem 1.15rem 1.2rem;
}
.tools[data-view="grid"] .tool__title em{ color:#8CA6B6 }
.tools[data-view="grid"] .tool__go{ display:none }

@media (max-width:34rem){
  .section__head{ flex-wrap:wrap; gap:.85rem }
  .tools[data-view="grid"]{ grid-template-columns:minmax(0,1fr) }
  .tools[data-view="grid"] .tool{ max-width:none }
}