/* Olam by Plasseril — veedu. Generated by build/build_veedu.py. */
:root{
  --t0:0.68rem;
  --t1:0.85rem;
  --t2:1.0625rem;
  --t3:1.3281rem;
  --t4:1.6602rem;
  --t5:2.0752rem;
  --t6:2.594rem;
  --t7:3.2425rem;
  --t8:4.0531rem;
  --t9:5.0664rem;
  --s0:0.25rem;
  --s1:0.5rem;
  --s2:0.75rem;
  --s3:1rem;
  --s4:1.5rem;
  --s5:2rem;
  --s6:3rem;
  --s7:4rem;
  --s8:6rem;
  --s9:9rem;
  --gold:#C09A5B;
  --gold-deep:#A67C3D;
  --ink:#2A2622;
  --paper:#FBF8F3;

  --fg:#2A2622;
  --fg-2:rgba(42,38,34,.70);          /*  5.46:1 on paper */
  --on-ink:#FBF8F3;                   /* 14.17:1 on ink   */
  --on-ink-2:rgba(251,248,243,.74);   /*  8.41:1 on ink   */
  --focus:#2A2622;

  /* Three rules, three meanings. Nothing else on this page is ruled. */
  --rule-hair:1px solid rgba(42,38,34,.16);   /* like from like        */
  --rule-part:1px solid rgba(42,38,34,.55);   /* part from part        */
  --rule-mark:2px solid var(--gold-deep);     /* the two things wanted */

  --display:"Libre Caslon Display",Georgia,"Times New Roman",serif;
  --text:"Libre Caslon Text",Georgia,"Times New Roman",serif;
  --label:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;

  --meas:54ch;
  --gut:clamp(var(--s4),5vw,var(--s8));
  --page:74rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--fg);
  font-family:var(--text);
  font-size:var(--t2);
  line-height:1.62;
  font-kerning:normal;
  hanging-punctuation:first last;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2{font-weight:400;margin:0;text-wrap:balance}
p,ul{margin:0}
p{text-wrap:pretty}
ul{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}

/* --- the three rules ---------------------------------------------------- */
.rule{display:block;border:0;height:0;width:100%}
.rule--hair{border-top:var(--rule-hair)}
.rule--part{border-top:var(--rule-part)}
.rule--mark{border-top:var(--rule-mark);width:var(--s9)}

/* --- shared shells ------------------------------------------------------ */
.sec{width:100%;max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.sec+.sec,.say+.sec{margin:var(--s9) auto 0}
.sec>*+*{margin-top:var(--s6)}
.head{margin:0}
.head h2{font-family:var(--display);font-size:var(--t6);line-height:1.06;
  letter-spacing:-.012em;margin:var(--s3) 0 0}

/* --- header strip ------------------------------------------------------- */
.strip{width:100%;max-width:var(--page);margin:0 auto;
  padding:var(--s4) var(--gut);display:flex;flex-wrap:wrap;
  align-items:baseline;justify-content:space-between;gap:var(--s2) var(--s5);
  font-family:var(--label);font-size:var(--t1);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase}
.strip__n{color:var(--fg)}
.strip__a{color:var(--fg-2);text-decoration:none;
  border-bottom:var(--rule-hair);padding:0 0 var(--s0);
  transition:color .35s cubic-bezier(.16,1,.3,1)}
.strip__a:hover{color:var(--fg)}

/* --- title page --------------------------------------------------------- */
.title{width:100%;max-width:var(--page);margin:0 auto;
  padding:var(--s6) var(--gut) 0;display:grid;gap:var(--s7);
  grid-template-columns:minmax(0,1fr)}
.mark{width:12rem;height:auto;mix-blend-mode:multiply;
  margin:0 0 var(--s6)}
.title__pre{display:block;font-family:var(--text);font-style:italic;
  font-size:var(--t4);line-height:1.1;letter-spacing:-.004em;
  color:var(--fg-2);margin:0 0 var(--s1)}
.title__big{display:block;font-family:var(--display);
  font-size:clamp(var(--t6),8.2vw,var(--t9));line-height:.96;
  letter-spacing:-.018em}
.title .rule--mark{margin:var(--s5) 0 var(--s5)}
.lede{font-size:var(--t3);line-height:1.5;max-width:var(--meas);
  margin:0 0 var(--s5)}
.place{font-family:var(--label);font-size:var(--t1);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2);
  margin:0 0 var(--s5)}
.quick{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);
  font-family:var(--label);font-size:var(--t2)}
.quick a{display:inline-block;text-decoration:none;
  border-bottom:var(--rule-hair);
  padding:var(--s1) var(--s1) var(--s0);margin:0 calc(var(--s1) * -1);
  transition:background .3s cubic-bezier(.16,1,.3,1)}
.quick li:first-child a{border-bottom:var(--rule-mark)}
.quick a:hover,.quick a:focus-visible{background:rgba(192,154,91,.22)}
.title__p{width:100%}
.title__p .fill{width:100%;height:auto}

/* --- statement ---------------------------------------------------------- */
.say{width:100%;max-width:var(--page);margin:var(--s9) auto 0;
  padding:0 var(--gut)}
.say__t{font-family:var(--display);font-size:var(--t5);line-height:1.2;
  letter-spacing:-.012em;max-width:var(--meas);margin:0 0 var(--s5)}
.say .rule--hair{max-width:var(--meas);margin:0 0 var(--s3)}
.say__s{font-family:var(--label);font-size:var(--t1);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}

/* --- plate grid --------------------------------------------------------- */
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
/* minmax(0,...) everywhere, and min-width:0 on every grid item: a photograph's
 * intrinsic width must never become a layout minimum. */
.grid>*,.title>*{min-width:0}
.plate{margin:0}
.plate__f{width:100%}
.plate__f--crop{aspect-ratio:var(--crop)}
.plate__f--crop img{width:100%;height:100%;object-fit:cover}
.key{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  font-family:var(--label);font-size:var(--t1);font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-2)}

/* --- schedule ----------------------------------------------------------- */
.sched{display:grid;grid-template-columns:minmax(0,1fr)}
.sched li{border-top:var(--rule-hair);padding:var(--s3) 0;
  font-size:var(--t3);line-height:1.35;text-wrap:pretty}
.sched li:last-child{border-bottom:var(--rule-hair)}

/* --- the ask ------------------------------------------------------------ */
.ask{background:var(--ink);color:var(--on-ink);margin:var(--s9) 0 0;
  padding:var(--s8) 0;--focus:#C09A5B;
  --rule-hair:1px solid rgba(251,248,243,.22);
  --rule-part:1px solid rgba(251,248,243,.50)}
.ask__in{width:100%;max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.ask h2{font-family:var(--display);font-size:var(--t6);line-height:1.06;
  letter-spacing:-.012em;margin:var(--s3) 0 var(--s4)}
.ask__p{font-size:var(--t3);line-height:1.5;color:var(--on-ink-2);
  max-width:var(--meas);margin:0 0 var(--s7);text-wrap:pretty}
.acts li{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--s2) var(--s5);border-top:var(--rule-hair);padding:var(--s3) 0}
/* Only the last row of the last list closes the schedule. Closing the phone
 * list too left two hairlines with an empty band between them, which reads as
 * a row that lost its content. */
.acts--alt li:last-child{border-bottom:var(--rule-hair)}
.acts__n{font-family:var(--label);font-size:var(--t3);font-weight:500;
  letter-spacing:.06em;font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;min-width:11ch}
.ask .acts a{font-family:var(--label);font-size:var(--t2);text-decoration:none;
  color:var(--gold);display:inline-flex;align-items:baseline;gap:var(--s1);
  transition:color .35s cubic-bezier(.16,1,.3,1)}
/* The dash reserves its full length and scales inside it: animating width
 * would relayout the row on every hover. */
.ask .acts a::after{content:"";width:2.6rem;height:1px;background:currentColor;
  transform:scaleX(.54);transform-origin:left center;
  transition:transform .45s cubic-bezier(.16,1,.3,1)}
.ask .acts a:hover,.ask .acts a:focus-visible{color:var(--on-ink)}
.ask .acts a:hover::after,.ask .acts a:focus-visible::after{transform:scaleX(1)}
.acts--alt{margin:var(--s6) 0 0}
.acts--alt li{display:block}

/* --- colophon ----------------------------------------------------------- */
.foot{background:var(--ink);color:var(--on-ink);padding:0 0 var(--s8);
  --focus:#C09A5B;--rule-hair:1px solid rgba(251,248,243,.22);
  --rule-part:1px solid rgba(251,248,243,.50)}
.foot__in{width:100%;max-width:var(--page);margin:0 auto;padding:0 var(--gut)}
.adr{font-style:normal;font-family:var(--display);font-size:var(--t4);
  line-height:1.28;color:var(--on-ink);margin:0 0 var(--s6);display:block}
.adr__l{display:block;padding:0 0 0 calc(var(--lvl) * var(--s2))}
.foot .rule--hair{margin:0 0 var(--s5)}
.sign{font-family:var(--display);font-size:var(--t5);color:var(--gold);
  letter-spacing:-.008em;margin:0}

/* --- wide --------------------------------------------------------------- */
@media (min-width:48rem){
  .sched{grid-template-columns:repeat(2,minmax(0,1fr));
    column-gap:var(--s7)}
  .sched li:nth-last-child(2){border-bottom:var(--rule-hair)}
}
@media (min-width:60rem){
  .title{max-width:none;align-items:end;gap:var(--s8);
    grid-template-columns:minmax(0,1fr) minmax(0,38vw);
    padding:var(--s7) 0 0 max(var(--gut),
      calc((100vw - var(--page)) / 2 + var(--gut)))}
  .title__p{aspect-ratio:4/5}
  .title__p .fill{height:100%;object-fit:cover}
  .grid{grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--s5);row-gap:var(--s8)}
  .plate{grid-column:var(--c) / span var(--w);margin:var(--drop,0) 0 0}
  .head h2{font-size:var(--t7)}
  .ask h2{font-size:var(--t7)}
}

/* --- motion ------------------------------------------------------------- */
/* One authored moment: the rules draw themselves in. Rules are decoration, so
 * nothing readable is ever gated on a script, a ticker or an observer. The
 * html.js class is only set when motion is wanted and the viewport has a
 * measurable width. */
html.js .rule{transform:scaleX(0);transform-origin:left center;
  transition:transform 1.05s cubic-bezier(.16,1,.3,1)}
html.js .rule.is-in{transform:scaleX(1)}
html.reveal-all .rule{transform:none;transition:none}
@media (prefers-reduced-motion:reduce){
  html.js .rule,html.js .rule.is-in{transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}