/* ==========================================================================
   WuDesign. Direction C, liturgical.

   The page is set like a book rather than a brochure: vellum ground, a Syriac
   incipit, rubricated red for the things a rubric would mark, a drop cap, and
   two-column setting where the text is long enough to earn it.

   Palette rotated deliberately away from the beige-and-brass that every AI
   craft site lands on. Rubric red is doing the work brass would have done.
   ========================================================================== */

:root{
  --vellum:#EFEEE8;
  --vellum-2:#E7E5DC;
  --vellum-3:#DEDCD1;
  --ink:#1A1A17;
  --ink-74:rgba(26,26,23,.74);
  --ink-52:rgba(26,26,23,.52);
  --ink-32:rgba(26,26,23,.32);
  --rubric:#8B2500;          /* darker than the first pass, closer to real rubrication */
  --rubric-12:rgba(139,37,0,.12);
  --leaf:#6E9A2C;
  --line:rgba(26,26,23,.17);
  --line-soft:rgba(26,26,23,.09);

  --serif:"EB Garamond",Georgia,"Times New Roman",serif;
  --syr:"Noto Sans Syriac","Estrangelo Edessa","Serto Jerusalem",serif;
  --mal:"Noto Serif Malayalam","Nirmala UI",sans-serif;
  --ui:"Jost","Century Gothic",system-ui,sans-serif;

  --gut:clamp(20px,4.5vw,60px);
  --sec:clamp(56px,7.5vw,110px);
  --maxw:1180px;
  --gilt:#B08A4A;           /* the one metallic note; used sparingly */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;background:var(--vellum);color:var(--ink);
  font:400 18px/1.68 var(--serif);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[lang="ml"] body{font-family:var(--mal);font-size:16.5px;line-height:1.95}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
section{padding-block:var(--sec)}
.tint{background:var(--vellum-2);border-block:1px solid var(--line-soft)}

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3{margin:0;font-weight:400;letter-spacing:-.005em}
.d1{font-size:clamp(34px,4.9vw,64px);line-height:1.06}
.d2{font-size:clamp(27px,3.5vw,46px);line-height:1.12;max-width:20ch}
.d3{font-size:clamp(20px,2.1vw,27px);line-height:1.22}
html[lang="ml"] .d1{font-size:clamp(28px,4.1vw,52px);line-height:1.3}
html[lang="ml"] .d2{font-size:clamp(21px,2.6vw,33px);line-height:1.4}
html[lang="ml"] .d3{font-size:clamp(17px,1.8vw,22px);line-height:1.5}

.rubric{color:var(--rubric)}
.lede{font-size:clamp(18px,1.5vw,20.5px);color:var(--ink-74);max-width:62ch;margin:0}
.body-copy p{color:var(--ink-74);max-width:64ch;margin:0 0 1.05em}
.body-copy p:last-child{margin-bottom:0}

/* Eyebrows are rationed: three on the whole page, no more. */
.eyebrow{
  font-family:var(--ui);font-size:11.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rubric);margin:0 0 16px;
}
html[lang="ml"] .eyebrow{font-family:var(--mal);letter-spacing:.04em;text-transform:none;font-size:14px}

/* ---------- nav ----------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:40;background:rgba(239,238,232,.94);
  backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav__in{display:flex;align-items:center;gap:clamp(12px,2.2vw,30px);height:72px}
.mark{display:flex;align-items:center;gap:11px;margin-right:auto;flex:none}
.mark img{width:27px;height:31px}
.mark b{font-family:var(--ui);font-size:14px;font-weight:500;letter-spacing:.26em}
.nav__links{display:flex;gap:clamp(12px,1.9vw,26px)}
.nav__links a{font-size:16px;color:var(--ink-52);transition:color .3s var(--ease);white-space:nowrap}
.nav__links a:hover,.nav__links a:focus-visible{color:var(--rubric)}
html[lang="ml"] .nav__links a{font-size:14.5px}

.lang{display:flex;border:1px solid var(--line);border-radius:2px;overflow:hidden;flex:none}
.lang button{padding:6px 11px;font-family:var(--ui);font-size:11px;letter-spacing:.12em;
  color:var(--ink-52);transition:.3s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--vellum)}

/* a.btn beats .nav a on specificity. Without this the label inherits the nav
   colour and a coloured button ships with invisible text. */
a.btn,.btn{
  display:inline-flex;align-items:center;gap:9px;padding:12px 24px;border-radius:2px;
  background:var(--rubric);color:var(--vellum);font-family:var(--ui);font-size:13.5px;
  font-weight:400;letter-spacing:.04em;border:1px solid var(--rubric);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .12s var(--ease);
}
a.btn:hover{background:var(--ink);border-color:var(--ink)}
a.btn:active{transform:translateY(1px)}
a.btn--quiet{background:none;color:var(--ink);border-color:var(--line)}
a.btn--quiet:hover{background:var(--ink);color:var(--vellum);border-color:var(--ink)}
html[lang="ml"] a.btn{font-family:var(--mal);font-size:14.5px;letter-spacing:0}

.burger{display:none;width:28px;height:26px;position:relative;flex:none}
.burger span{position:absolute;left:2px;right:2px;height:1.5px;background:var(--ink);transition:.32s var(--ease)}
.burger span:nth-child(1){top:8px}.burger span:nth-child(2){top:16px}
.nav.is-open .burger span:nth-child(1){top:12px;transform:rotate(45deg)}
.nav.is-open .burger span:nth-child(2){top:12px;transform:rotate(-45deg)}
@media(max-width:900px){
  .burger{display:block;order:3}
  .nav__links{position:fixed;inset:72px 0 auto;flex-direction:column;align-items:center;gap:20px;
    padding:36px 20px 44px;background:var(--vellum);border-bottom:1px solid var(--line);
    opacity:0;pointer-events:none;transform:translateY(-8px);
    transition:opacity .35s var(--ease),transform .35s var(--ease)}
  .nav.is-open .nav__links{opacity:1;pointer-events:auto;transform:none}
  .nav__links a{font-size:20px;color:var(--ink)}
  .lang{order:2}
}

/* ---------- incipit, the Syriac line that opens the page ------------------ */
/* It closes the opening rather than opening it, so it needs air on both
   sides now, and a rule above it to read as a close. */
.incipit{text-align:center;padding:clamp(30px,4.2vw,56px) 0 clamp(8px,1vw,14px);
  border-top:1px solid var(--line);margin-top:clamp(20px,3vw,40px)}
.incipit__syr{font-family:var(--syr);direction:rtl;font-size:clamp(22px,3vw,36px);
  line-height:1.75;color:var(--rubric);margin:0}
.incipit__tr{margin:12px 0 0;font-family:var(--ui);font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-32)}
.incipit__en{margin:8px 0 0;font-size:17px;color:var(--ink-52);font-style:italic}
html[lang="ml"] .incipit__en{font-family:var(--mal);font-style:normal;font-size:15.5px}
html[lang="ml"] .incipit__tr{font-family:var(--ui)}

/* ---------- hero: one big slideshow, and almost no words ------------------- */
/* Carel, plainly: "we need to impress them at the start, they have low
   attention span", and "just cut the text, just put the images". So the page
   opens on a full-bleed picture at the size the carving deserves, with the
   headline sitting on it rather than beside it. */
.hero{padding:0}
.show{position:relative;margin:0}
/* fills the screen under the sticky nav, less a sliver so the edge of the
   next thing shows and the reader knows to scroll */
.show--hero .show__stage{height:clamp(440px,calc(96svh - 72px),1000px);border-radius:0}
.show--band .show__stage{height:clamp(300px,52vh,560px)}

.show__stage{position:relative;overflow:hidden;background:#14110D;isolation:isolate}
.show__stage img,.show__stage video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:0;transition:opacity 1.5s var(--ease);
  /* the patina: warmed, held back off full saturation, and printed rather than
     screen-bright. Straight phone JPEGs look like phone JPEGs without it. */
  filter:sepia(.20) saturate(.88) contrast(1.07) brightness(.94)}
.show__stage img.is-on{opacity:1;animation:kenburns 11s linear both}
/* a clip already moves; a slow zoom on top of it only makes it seasick */
.show__stage video.is-on{opacity:1}
/* the rendered opening film carries its own grade, so it gets none here */
.show__stage video.show__reel{filter:none}
@keyframes kenburns{from{transform:scale(1.005)}to{transform:scale(1.075)}}

/* grain and vignette, the two things that stop a big flat photograph looking
   like a stock header */
.show__grain{position:absolute;inset:0;pointer-events:none;opacity:.09;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.show__stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:inset 0 0 clamp(70px,13vw,210px) rgba(24,17,10,.62)}
.show__scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(18,14,10,.80) 0%,rgba(18,14,10,.42) 26%,
    rgba(18,14,10,.06) 52%,rgba(18,14,10,.22) 100%)}

/* the words, what few there are */
.show__body{position:absolute;left:0;right:0;bottom:0;
  padding:0 var(--gut) clamp(26px,4.4vw,58px);
  width:100%;max-width:var(--maxw);margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;gap:clamp(14px,1.6vw,20px)}
@media(min-width:1181px){
  .show__body{left:50%;right:auto;transform:translateX(-50%);max-width:1320px}
}
.show__head{margin:0;color:#F3F0E7;font-weight:400;letter-spacing:-.01em;
  font-size:clamp(38px,6.2vw,86px);line-height:1.02;
  text-shadow:0 2px 26px rgba(12,8,5,.55)}
html[lang="ml"] .show__head{font-size:clamp(28px,4.4vw,58px);line-height:1.28}
.show__head .rubric{color:#E7C489}
.show__cap{margin:0;max-width:46ch;color:rgba(243,240,231,.80);
  font-size:clamp(14.5px,1.05vw,16.5px);line-height:1.55;font-style:italic;
  text-shadow:0 1px 14px rgba(12,8,5,.6)}
html[lang="ml"] .show__cap{font-family:var(--mal);font-style:normal;font-size:14px}
.show__sub{margin:0;color:rgba(243,240,231,.86);font-size:clamp(15px,1.25vw,19px);
  line-height:1.5;text-shadow:0 1px 14px rgba(12,8,5,.65)}
html[lang="ml"] .show__sub{font-family:var(--mal);font-size:clamp(14px,1.1vw,16.5px)}
.show__cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}
.show--hero a.btn{background:var(--gilt);border-color:var(--gilt);color:#1A1509}
.show--hero a.btn:hover{background:#F3F0E7;border-color:#F3F0E7;color:var(--ink)}
.show--hero a.btn--quiet{background:rgba(243,240,231,.06);color:#F3F0E7;
  border-color:rgba(243,240,231,.44);backdrop-filter:blur(3px)}
.show--hero a.btn--quiet:hover{background:#F3F0E7;color:var(--ink);border-color:#F3F0E7}

/* the index, set like a plate number in a catalogue raisonne */
.show__num{position:absolute;top:clamp(18px,2.4vw,30px);right:clamp(18px,3vw,42px);
  display:flex;align-items:center;gap:10px;font-family:var(--ui);
  font-size:11px;letter-spacing:.24em;color:rgba(243,240,231,.78);
  text-shadow:0 1px 10px rgba(12,8,5,.85)}
.show__num b{font-weight:400;color:#E7C489}
.show__num i{display:block;width:22px;height:1px;background:rgba(243,240,231,.34)}

/* the rail: hairlines, not dots */
.show__rail{position:absolute;left:0;right:0;bottom:0;display:flex;gap:0;
  height:2px;background:rgba(243,240,231,.14)}
.show__rail button{flex:1 1 0;height:100%;border:0;padding:0;cursor:pointer;
  background:transparent;transition:background .5s var(--ease)}
.show__rail button[aria-current="true"]{background:var(--gilt)}
.show__rail button:hover{background:rgba(231,196,137,.5)}
.show__rail button:focus-visible{outline:2px solid var(--gilt);outline-offset:-4px}

@media(prefers-reduced-motion:reduce){
  .show__stage img,.show__stage video{transition:none;animation:none}
}

/* what we make, with the paragraphs taken out: the titles carry it, and the
   catalogue underneath is the real answer to "can you make X" */
.step--bare{padding-bottom:0}
.step--bare h3{margin:0}


/* ---------- the opener: the catalogue, as a slideshow ----------------------- */
/* The page starts on the work itself. Every plate is shown whole — contain,
   not cover — because half of these were shot upright on a phone and cropping
   them to a wide frame throws away the top and bottom of the carving. The dark
   ground is what makes a letterboxed picture look deliberate instead of
   broken. */
.opener{padding:0;background:#14110D}
.opener__stage{position:relative;overflow:hidden;background:#14110D;isolation:isolate;
  height:clamp(400px,calc(92svh - 72px),920px)}
.opener__stage img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;opacity:0;transition:opacity 1.1s var(--ease);
  filter:sepia(.16) saturate(.9) contrast(1.05) brightness(.97)}
.opener__stage img.is-on{opacity:1}
.opener__grain{position:absolute;inset:0;pointer-events:none;opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.opener__cap{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2.2vw,26px) var(--gut) clamp(22px,3vw,34px);
  display:flex;align-items:baseline;gap:10px 16px;flex-wrap:wrap;
  background:linear-gradient(to top,rgba(18,14,10,.88),rgba(18,14,10,0));
  width:100%;max-width:1320px;margin-inline:auto}
.opener__no{font-family:var(--ui);font-size:10.5px;letter-spacing:.22em;
  text-transform:uppercase;color:#E7C489}
.opener__name{font-size:clamp(19px,2.1vw,27px);color:#F3F0E7;margin:0}
html[lang="ml"] .opener__name{font-family:var(--mal);font-size:clamp(16px,1.8vw,21px)}
.opener__where{font-size:14px;color:rgba(243,240,231,.62);font-style:italic}
html[lang="ml"] .opener__where{font-family:var(--mal);font-style:normal;font-size:13px}
.opener__num{position:absolute;top:clamp(16px,2.2vw,26px);right:clamp(16px,3vw,40px);
  font-family:var(--ui);font-size:11px;letter-spacing:.24em;
  color:rgba(243,240,231,.72);text-shadow:0 1px 10px rgba(12,8,5,.85)}
.opener__num b{font-weight:400;color:#E7C489}
.opener__rail{position:absolute;left:0;right:0;bottom:0;display:flex;height:2px;
  background:rgba(243,240,231,.14)}
.opener__rail button{flex:1 1 0;height:100%;border:0;padding:0;cursor:pointer;
  background:transparent;transition:background .5s var(--ease)}
.opener__rail button[aria-current="true"]{background:var(--gilt)}
.opener__rail button:hover{background:rgba(231,196,137,.5)}
@media(prefers-reduced-motion:reduce){.opener__stage img{transition:none}}

/* ---------- the title block, after the work rather than before it ----------- */
.saywhat{padding-block:clamp(30px,4vw,54px);text-align:center}
.saywhat h1{margin:0 auto;max-width:16ch;font-size:clamp(32px,4.6vw,62px);
  line-height:1.04;font-weight:400;letter-spacing:-.01em}
html[lang="ml"] .saywhat h1{font-size:clamp(25px,3.4vw,44px);line-height:1.3}
.saywhat p{margin:14px auto 0;max-width:42ch;color:var(--ink-52);
  font-size:clamp(15px,1.2vw,18px)}
.saywhat .show__cta{justify-content:center;margin-top:clamp(20px,2.4vw,30px)}

/* ---------- the WhatsApp button --------------------------------------------- */
/* Sized here and nowhere else. An inline SVG with no width in the CSS renders
   at whatever size the viewport allows, which is how this ended up filling
   half the screen once before. */
.wa{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:60;
  width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#25d366;color:#fff;text-decoration:none;overflow:hidden;
  box-shadow:0 12px 26px -10px rgba(20,60,35,.55),0 2px 6px rgba(26,26,23,.18);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s}
.wa.is-on{opacity:1;visibility:visible;transform:none}
.wa svg{width:30px;height:30px;max-width:30px;max-height:30px;display:block;flex:none}
.wa:hover{transform:translateY(-2px)}
.wa:focus-visible{outline:2px solid var(--gilt);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.wa{transition:opacity .01s}.wa:hover{transform:none}}

/* ---------- the name-and-number popup --------------------------------------- */
.pop{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px}
.pop[hidden]{display:none}
.pop__veil{position:absolute;inset:0;background:rgba(26,26,23,.52);
  opacity:0;transition:opacity .35s var(--ease)}
.pop.is-on .pop__veil{opacity:1}
.pop__card{position:relative;width:min(430px,100%);background:var(--vellum);
  border:1px solid var(--line);border-radius:3px;
  padding:clamp(26px,4vw,38px) clamp(22px,3.4vw,34px) clamp(22px,3vw,30px);
  box-shadow:0 40px 80px -40px rgba(26,26,23,.7);
  opacity:0;transform:translateY(16px) scale(.98);
  transition:opacity .38s var(--ease),transform .38s var(--ease);
  max-height:calc(100vh - 40px);overflow:auto}
.pop.is-on .pop__card{opacity:1;transform:none}
.pop__x{position:absolute;top:10px;right:10px;width:34px;height:34px;flex:none;
  display:grid;place-items:center;color:var(--ink-32);border-radius:50%;overflow:hidden}
.pop__x:hover{color:var(--rubric)}
.pop__x svg{width:17px;height:17px;max-width:17px;max-height:17px;display:block;flex:none}
.pop__mark{width:22px;height:29px;max-width:22px;flex:none;color:var(--rubric);margin-bottom:14px}
.pop__body{margin:10px 0 20px;color:var(--ink-74);font-size:16.5px;line-height:1.6}
html[lang="ml"] .pop__body{font-size:15px}
.pop__form .field{margin-bottom:16px}
.pop__form .btn{width:100%;justify-content:center;margin-top:4px}
.pop__err{margin:0 0 12px;color:var(--rubric);font-size:14.5px}
.pop__later{display:block;width:100%;margin-top:12px;padding:6px;
  font-family:var(--ui);font-size:12.5px;letter-spacing:.06em;color:var(--ink-32)}
.pop__later:hover{color:var(--ink)}
html[lang="ml"] .pop__later{font-family:var(--mal);letter-spacing:0;font-size:14px}
.pop__done{padding:8px 0 4px;color:var(--ink-74);font-size:17px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.pop__veil,.pop__card{transition:none}}

/* ---------- the two doors --------------------------------------------------- */
/* One decision instead of a twelve-item list. A vicar taps the left, a family
   taps the right, and both land in the half of the catalogue they came for. */
.doors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,22px);
  padding-block:clamp(18px,2.4vw,30px)}
@media(max-width:680px){.doors{grid-template-columns:1fr}}
.door{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(12px,1.6vw,20px);width:100%;text-align:left;padding:10px 14px 10px 10px;
  border:1px solid var(--line);border-radius:3px;background:none;
  transition:border-color .35s var(--ease),background .35s var(--ease)}
.door:hover,.door:focus-visible{border-color:var(--rubric);background:var(--vellum-2)}
.door__pic{display:block;width:clamp(64px,7vw,92px);flex:none;overflow:hidden;border-radius:2px}
.door__pic img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  filter:sepia(.18) saturate(.9) contrast(1.05)}
.door__txt{display:block;min-width:0}
.door__txt b{display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(19px,2vw,25px);line-height:1.15}
html[lang="ml"] .door__txt b{font-family:var(--mal);font-size:clamp(16px,1.7vw,20px)}
.door__txt i{display:block;margin-top:4px;font-style:normal;font-size:14px;
  line-height:1.45;color:var(--ink-52)}
html[lang="ml"] .door__txt i{font-family:var(--mal);font-size:13px}
.door__go{font-size:20px;color:var(--rubric);transition:transform .3s var(--ease)}
.door:hover .door__go{transform:translateX(4px)}

/* ---------- proof, early ---------------------------------------------------- */
/* A building somebody can drive to, before any of the prose. It used to sit
   two thirds of the way down, which is past where most people stop. */
.proof{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding-block:clamp(12px,1.6vw,18px);
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.proof__label{font-family:var(--ui);font-size:10.5px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--rubric)}
html[lang="ml"] .proof__label{font-family:var(--mal);letter-spacing:.02em;
  text-transform:none;font-size:13px}
.proof b{font-weight:400;font-size:17px}
.proof a,.proof span:last-child{font-size:14.5px;color:var(--ink-52)}
.proof a{border-bottom:1px solid var(--line);transition:color .3s var(--ease)}
.proof a:hover{color:var(--rubric)}

/* ---------- a second slideshow, down the page ------------------------------ */
.band{padding:0}
.band .show__body{padding-bottom:clamp(22px,3vw,38px)}

/* ---------- Mar Thoma Sliba divider --------------------------------------- */
/* The Kerala cross, not a Western crucifix. */
.sliba{display:flex;align-items:center;justify-content:center;gap:18px;margin:clamp(30px,4vw,54px) 0}
.sliba i{display:block;width:min(200px,24vw);height:1px;background:var(--line)}
.sliba svg{width:26px;height:34px;flex:none;color:var(--rubric)}

/* ---------- two-column liturgical setting --------------------------------- */
.cols{columns:2;column-gap:clamp(28px,4vw,60px);margin-top:26px}
.cols p{margin:0 0 1.05em;color:var(--ink-74);break-inside:avoid}
.cols p:first-child::first-letter{
  float:left;font-size:4em;line-height:.84;padding:.06em .1em 0 0;
  color:var(--rubric);font-weight:500}
html[lang="ml"] .cols p:first-child::first-letter{float:none;font-size:1em;padding:0;color:inherit}
@media(max-width:820px){.cols{columns:1}}

/* ---------- split ---------------------------------------------------------- */
.split{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(26px,5vw,80px);align-items:start}
@media(max-width:880px){.split{grid-template-columns:1fr}}

.feature{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(24px,4.4vw,64px);align-items:center}
.feature img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
@media(max-width:880px){.feature{grid-template-columns:1fr}}

/* ---------- rubricated list ------------------------------------------------ */
.rubric-list{margin:24px 0 0;padding:0;list-style:none;column-count:2;column-gap:clamp(26px,4vw,56px)}
.rubric-list li{padding-left:24px;position:relative;margin-bottom:10px;color:var(--ink-74);break-inside:avoid}
.rubric-list li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border:1px solid var(--rubric);transform:rotate(45deg)}
@media(max-width:820px){.rubric-list{column-count:1}}

/* ---------- process -------------------------------------------------------- */
.steps{margin-top:clamp(26px,3.4vw,46px);border-top:1px solid var(--line-soft)}
.step{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.6vw,30px) 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.step h3{font-size:clamp(19px,2vw,25px)}
.step p{margin:0;color:var(--ink-52);font-size:16.5px}
html[lang="ml"] .step p{font-size:15px}
@media(max-width:760px){.step{grid-template-columns:1fr;gap:8px}}

/* ---------- go and see it -------------------------------------------------- */
.seenat{margin-top:clamp(24px,3vw,36px);padding:clamp(18px,2.2vw,26px) clamp(20px,2.4vw,28px);
  border:1px solid var(--line);border-radius:2px;background:var(--vellum)}
.seenat p{margin:0}
.seenat__label{font-family:var(--ui);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rubric)}
.seenat__church{font-size:22px;line-height:1.2;margin-top:7px}
.seenat__addr{font-size:16px;color:var(--ink-74);margin-top:3px}
.seenat__addr a{border-bottom:1px solid var(--line)}
.seenat__blurb{font-size:14.5px;color:var(--ink-52);line-height:1.5;margin-top:9px}
html[lang="ml"] .seenat__church{font-size:19px}

/* ---------- the timber list ------------------------------------------------ */
.timbers{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:0 clamp(20px,3vw,40px)}
.timbers li{padding:13px 0;border-bottom:1px solid var(--line-soft);font-size:17.5px;
  display:flex;align-items:baseline;gap:11px}
.timbers li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;
  background:var(--leaf);transform:translateY(-2px)}
html[lang="ml"] .timbers li{font-size:15.5px}

/* ---------- catalogue ------------------------------------------------------ */
.cat__filters{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0 clamp(24px,3vw,38px)}
.cat__filters button{
  padding:8px 16px;border:1px solid var(--line);border-radius:999px;
  font-size:15px;color:var(--ink-52);transition:.28s var(--ease)}
.cat__filters button:hover{border-color:var(--ink-32);color:var(--ink)}
.cat__filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--vellum)}
html[lang="ml"] .cat__filters button{font-size:14px}

.cat__group{margin-bottom:clamp(30px,4vw,52px)}
.cat__group h3{font-size:clamp(20px,2.2vw,28px);color:var(--rubric);
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.cat__count{font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-32);margin-left:auto}

/* A photographed subject is a plate. Everything else stays in the index below,
   so the catalogue reads as finished at every stage of being photographed. */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,32px);margin:clamp(22px,2.6vw,34px) 0 clamp(26px,3vw,42px)}
.plate{margin:0}
/* 4:3, because that is the shape the workshop camera actually produces. A
   taller frame looked better in the abstract and cropped the top and bottom
   off every real photograph, which is the wrong way round: the plate follows
   the photograph, not the other way about. */
.plate img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  background:var(--vellum-2);border-radius:2px}
/* The clips came off a phone, most of them upright. Cropping an upright clip
   to 4:3 throws away the half of the frame the work is in, so a film sits
   whole inside the plate on a dark ground instead. */
.plate__video{width:100%;aspect-ratio:4/3;object-fit:contain;display:block;
  background:#191612;border-radius:2px}
.plate__place{font-family:var(--ui);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--leaf);margin:4px 0 0;display:block}
.plate figcaption{padding-top:12px}
.plate__no{font-family:var(--ui);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-32)}
.plate__name{font-size:19px;line-height:1.25;margin:5px 0 0}
html[lang="ml"] .plate__name{font-size:16.5px}
.plate__note{margin:5px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-52)}
html[lang="ml"] .plate__note{font-size:13.5px}
.cat__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:0 clamp(20px,3vw,40px)}
.cat__item{display:grid;grid-template-columns:auto 1fr;gap:13px;padding:14px 0;
  border-bottom:1px solid var(--line-soft);align-items:start}
.cat__no{font-family:var(--ui);font-size:11.5px;letter-spacing:.08em;color:var(--ink-32);padding-top:5px}
.cat__name{font-size:17.5px;line-height:1.3;margin:0}
html[lang="ml"] .cat__name{font-size:15.5px}
.cat__note{margin:3px 0 0;font-size:14.5px;line-height:1.5;color:var(--ink-52)}
html[lang="ml"] .cat__note{font-size:13.5px}
.cat__timber{font-family:var(--ui);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--leaf);margin-top:5px;display:inline-block}

/* ---------- committee accordion -------------------------------------------- */
.qa{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line)}
.qa__item{border-bottom:1px solid var(--line)}
.qa__q{width:100%;display:flex;align-items:baseline;gap:20px;text-align:left;
  padding:clamp(18px,2.2vw,26px) 0;font-family:var(--serif);
  font-size:clamp(18px,1.9vw,24px);line-height:1.3;transition:color .3s var(--ease)}
html[lang="ml"] .qa__q{font-family:var(--mal);font-size:clamp(16px,1.6vw,19px)}
.qa__q:hover{color:var(--rubric)}
.qa__q i{margin-left:auto;flex:none;width:12px;height:12px;position:relative;align-self:center}
.qa__q i::before,.qa__q i::after{content:"";position:absolute;inset:50% 0 auto;height:1px;
  background:var(--rubric);transition:transform .4s var(--ease)}
.qa__q i::after{transform:rotate(90deg)}
.qa__item.is-open .qa__q i::after{transform:rotate(0)}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.qa__item.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}
.qa__a p{margin:0 0 clamp(20px,2.4vw,28px);color:var(--ink-52);max-width:66ch;padding-right:32px}

/* ---------- contact -------------------------------------------------------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
@media(max-width:880px){.contact{grid-template-columns:1fr}}
.field{margin-bottom:20px}
.field label{display:block;font-family:var(--ui);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-52);margin-bottom:7px}
html[lang="ml"] .field label{font-family:var(--mal);letter-spacing:0;text-transform:none;font-size:13.5px}
.field input,.field textarea,.field select{
  width:100%;padding:11px 0;background:none;color:var(--ink);border:0;
  border-bottom:1px solid var(--line);font:inherit;font-size:17px;border-radius:0;
  transition:border-color .3s var(--ease)}
.field textarea{resize:vertical;min-height:96px}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-bottom-color:var(--rubric)}
.field select option{background:var(--vellum);color:var(--ink)}
.formnote{margin-top:14px;font-size:14px;color:var(--ink-32);line-height:1.55}

.dl{margin:0}
.dl div{padding:17px 0;border-top:1px solid var(--line-soft);display:grid;
  grid-template-columns:minmax(88px,.38fr) 1fr;gap:18px}
.dl div:last-child{border-bottom:1px solid var(--line-soft)}
.dl dt{font-family:var(--ui);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-32)}
html[lang="ml"] .dl dt{font-family:var(--mal);letter-spacing:0;text-transform:none;font-size:13.5px}
.dl dd{margin:0;color:var(--ink-74)}
.dl dd a:hover{color:var(--rubric)}

/* ---------- footer --------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding-block:clamp(34px,4.4vw,60px)}
.footer__row{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:center;justify-content:space-between}
.footer__line{font-size:clamp(17px,1.9vw,23px);color:var(--ink-52);font-style:italic;margin:0}
html[lang="ml"] .footer__line{font-family:var(--mal);font-style:normal}
.footer__small{font-family:var(--ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-32);margin:0}

/* ---------- editorial flags, visible until the content is filled in -------- */
.flag{display:inline-block;padding:1px 7px;margin-inline:3px;border-radius:2px;
  background:var(--rubric-12);color:var(--rubric);font-family:var(--ui);
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}

/* ---------- photograph slot ------------------------------------------------ */
.slot{display:grid;place-content:center;gap:8px;text-align:center;padding:28px;
  border:1px dashed var(--line);border-radius:2px;background:var(--vellum-2);
  color:var(--ink-32);font-size:14px;aspect-ratio:3/2}
.slot code{font-family:ui-monospace,monospace;font-size:12px}

/* ---------- motion --------------------------------------------------------- */
/* Reveals are staggered down the page so a section arrives as a sentence does,
   in order, rather than all at once. */
.rv{opacity:0;transform:translateY(20px);
  transition:opacity .85s var(--ease),transform .85s var(--ease)}
.rv.is-in{opacity:1;transform:none}
.hero .rv{transition-duration:1s}

/* the rubric rule draws itself in, which is the one flourish the page gets */
.sliba i{transform:scaleX(0);transform-origin:center;transition:transform 1.1s var(--ease)}
.sliba.is-in i{transform:scaleX(1)}
.sliba svg{opacity:0;transition:opacity .7s var(--ease) .5s}
.sliba.is-in svg{opacity:1}

@media (prefers-reduced-motion:reduce){
  .rv,.sliba i,.sliba svg{opacity:1;transform:none;transition:none}
}