/*
  Garis Waktu — site chrome (masthead, menu tabs, footer), the landing hero,
  the six menu pages and the "Segera Hadir" page. Loaded on every page,
  after style.css.

  Built from "website gariswaktu.pdf". Desktop sizes are written in mockup
  pixels × --gw-u on a 1080px-wide grid, so pages match the PDF at 1080px
  wide and scale with the window up to ~1460px. Text never drops below a
  readable minimum, so text-heavy blocks grow taller than in the PDF.
  Below 900px a stacked layout takes over; below 640px the tabs wrap onto
  two rows.

  Two reds, as in the PDF: --gw-hero-red behind the homepage lettering,
  --gw-brand-red for type, rules and the mascot cards.
*/

:root{
  --gw-orange:#F7931D;
  --gw-gray:#CCCCCC;
  --gw-tab-line:#DCDCDC;
  --gw-hero-red:#FF1D25;
  --gw-brand-red:#ED1C24;
  --gw-footer:#E6E6E6;
  --gw-portfolio:#999999;
  --gw-ink:#231F20;
  --gw-u:clamp(0.8334px, 100vw / 1080, 1.35px);
}

/* Below the footer, show footer gray rather than white. */
html{background:var(--gw-footer);}

.gw-masthead,
.gw-tabbar,
.gw-landing,
.gw-page,
.gw-contact,
.gw-soon,
.gw-site-footer{
  font-family:'Barlow',system-ui,sans-serif;
  font-weight:500;
  color:var(--gw-ink);
}
.gw-tabs ul,
.gw-names ul,
.gw-site-footer ul{list-style:none;margin:0;padding:0;}
.gw-masthead a:focus-visible,
.gw-tabs a:focus-visible,
.gw-page a:focus-visible,
.gw-contact a:focus-visible,
.gw-soon a:focus-visible,
.gw-site-footer a:focus-visible{outline:2px solid var(--gw-ink);outline-offset:2px;}

.gw-visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.gw-masthead-inner,
.gw-tabbar-inner,
.gw-landing-art,
.gw-page-inner,
.gw-contact-inner{
  position:relative;
  width:min(100%, calc(1080 * var(--gw-u)));
  margin-inline:auto;
}


/* ---------- Masthead (orange | gray) ---------- */
.gw-masthead{
  /* The split sits 32 mockup-px right of centre at every width. */
  background:linear-gradient(90deg, var(--gw-orange) calc(50% + 32 * var(--gw-u)), var(--gw-gray) 0);
}
.gw-masthead-inner{height:calc(168 * var(--gw-u));}

/* Hand logo + title + "4 Dekade 86" mark, one image. */
.gw-masthead-lockup{
  position:absolute;
  left:4.72%;
  top:calc(33.4 * var(--gw-u));
  width:44.48%;
}
.gw-masthead-lockup img{display:block;width:100%;height:auto;}

.gw-supporters{
  position:absolute;
  left:55.09%;
  top:calc(62 * var(--gw-u));
  width:calc(461 * var(--gw-u));
}
.gw-supporters-label{
  margin:0 0 calc(16 * var(--gw-u)) calc(2.6 * var(--gw-u));
  font-weight:700;
  font-size:max(10px, calc(12.5 * var(--gw-u)));
  line-height:1;
  letter-spacing:0.03em;
  text-transform:uppercase;
}
.gw-supporters-logos{display:block;width:100%;height:auto;}


/* ---------- Menu tabs ----------
   The band behind the tabs takes the colour of the page's first section
   (garis_waktu_tabbar_tone(), or gw_tabbar_tone set by a page template), so
   the tabs hang from the masthead. On photo pages they sit on the photo. */
.gw-tabbar{background:#fff;}
.gw-tabbar--red{background:var(--gw-hero-red);}
.gw-tabbar--orange{background:var(--gw-orange);}
.gw-tabbar--gray{background:var(--gw-footer);}
.gw-tabbar--photo{
  position:relative;
  z-index:2;
  background:transparent;
  margin-bottom:calc(-1 * max(22px, calc(25 * var(--gw-u))));
}

.gw-tabs{margin-left:15.65%;width:65.19%;}
.gw-tabs ul{display:flex;gap:1px;background:var(--gw-tab-line);}
.gw-tabs li{flex:1 1 0;min-width:0;}
.gw-tabs a{
  display:flex;align-items:center;justify-content:center;
  height:calc(25 * var(--gw-u));
  min-height:22px;
  padding:0 4px;
  background:var(--gw-gray);
  font-size:max(13px, calc(14.5 * var(--gw-u)));
  white-space:nowrap;
  transition:background-color .15s;
}
.gw-tabs a:hover{background:#DADADA;}
.gw-tabs a[aria-current="page"]{background:var(--gw-orange);}
.gw-tabbar--orange .gw-tabs a[aria-current="page"]{background:#fff;}


/* ---------- Landing hero (home page) ---------- */
.gw-landing{background:var(--gw-hero-red);overflow:hidden;}
.gw-landing-art{aspect-ratio:1080 / 507.5;}

.gw-landing-logo{
  position:absolute;
  left:26.62%;
  top:14.27%;
  width:47.22%;
  margin:0;
}
.gw-landing-logo img{display:block;width:100%;}

.gw-landing-ruler{
  position:absolute;
  left:3.62%;
  top:92.3%;
  width:92.67%;
  height:auto;
  max-width:none;
}
.gw-landing-photos{display:block;width:100%;height:auto;max-width:none;}


/* ---------- Mascots ----------
   The mascot PNGs are 830×1079 with the figure (414×732) at x246 y181.
   left/top/--mw place and size the visible figure; the image is scaled
   up and shifted so its transparent margin falls outside that box. */
.gw-mascot{
  --mw:8%;
  position:absolute;
  width:calc(var(--mw) * 830 / 414);
  max-width:none;
  translate:-29.64% -16.77%;
  pointer-events:none;
}


/* ---------- Menu pages: banner photo ---------- */
.gw-banner{aspect-ratio:2100 / 601;overflow:hidden;background:var(--gw-ink);}
.gw-banner img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;}


/* ---------- Menu pages: content on light gray ---------- */
.gw-page{background:var(--gw-footer);}
.gw-page-inner{
  box-sizing:border-box;
  min-height:calc(345 * var(--gw-u));
  padding:calc(72 * var(--gw-u)) 0 calc(40 * var(--gw-u));
}
.gw-page-title{
  margin:0 0 0 22.2%;
  font-weight:700;
  font-size:max(22px, calc(21 * var(--gw-u)));
  line-height:1.2;
}
.gw-page-text{
  width:46%;
  margin:calc(17 * var(--gw-u)) 0 0 22.2%;
  font-size:max(15px, calc(13 * var(--gw-u)));
  line-height:1.6;
}
.gw-page-text > :first-child{margin-top:0;}
.gw-page-text p{margin:0 0 1em;}
.gw-page-text a{color:var(--gw-brand-red);}
.gw-page-text img{max-width:100%;height:auto;}
.gw-page-card{
  position:absolute;
  left:76.85%;
  top:calc(118 * var(--gw-u));
  width:12.53%;
  height:auto;
  max-width:none;
}

/* Seniman / Desainer: card on the left, names in four columns. */
.gw-page--profiles .gw-page-card{left:4.67%;}
.gw-names{
  display:grid;
  grid-template-columns:repeat(4, calc(155 * var(--gw-u)));
  column-gap:calc(33 * var(--gw-u));
  margin:calc(18 * var(--gw-u)) 0 0 22.8%;
}
.gw-names-group{display:flex;flex-direction:column;}
.gw-names h2{
  margin:0 0 calc(12 * var(--gw-u));
  color:var(--gw-brand-red);
  font-weight:700;
  font-size:max(15px, calc(13 * var(--gw-u)));
  line-height:1.2;
}
/* The list stretches to the tallest column so the red rules match. */
.gw-names ul{
  flex:1;
  padding-right:calc(10 * var(--gw-u));
  border-right:2px solid var(--gw-brand-red);
  font-size:max(14px, calc(11.5 * var(--gw-u)));
  line-height:1.45;
}
.gw-names-group:last-child ul{border-right:0;}
.gw-names li{position:relative;padding-left:0.85em;}
.gw-names li::before{content:"-";position:absolute;left:0;}

/* Pameran: card left, red lettering, then the text. */
.gw-page--pameran .gw-page-title{margin-left:23.43%;}
.gw-page--pameran .gw-page-card{left:5.74%;top:calc(99.8 * var(--gw-u));}
.gw-page-lettering{
  position:absolute;
  left:21.95%;
  top:calc(138.3 * var(--gw-u));
  width:16.9%;
  height:auto;
  max-width:none;
}
.gw-page--pameran .gw-page-text{
  width:35.74%;
  margin:calc(8 * var(--gw-u)) 0 0 46.57%;
}

/* Portofolio: gray section (and footer) with a row of works. */
.gw-page--portfolio{background:var(--gw-portfolio);}
.gw-page--portfolio .gw-page-inner{
  min-height:calc(320 * var(--gw-u));
  padding-top:calc(66 * var(--gw-u));
}
.gw-page--portfolio .gw-page-title{margin-left:15.19%;text-transform:uppercase;}
html:has(.gw-page--portfolio),
body:has(.gw-page--portfolio) .gw-site-footer{background:var(--gw-portfolio);}
/* Each photo's flex-grow is its width/height, so the row keeps one height. */
.gw-gallery{
  display:flex;
  width:79.54%;
  height:calc(131 * var(--gw-u));
  margin:calc(43 * var(--gw-u)) 0 0 11.29%;
}
.gw-gallery img{
  flex-basis:0;
  min-width:0;
  height:100%;
  max-width:none;
  object-fit:cover;
}


/* ---------- Contact Us ---------- */
.gw-contact{overflow:hidden;background:var(--gw-footer);}
.gw-contact-inner{
  box-sizing:border-box;
  min-height:calc(600 * var(--gw-u));
  padding-bottom:calc(30 * var(--gw-u));
}
.gw-contact-lettering{
  position:absolute;
  left:11%;
  top:calc(77.7 * var(--gw-u));
  width:21.14%;
  height:auto;
  max-width:none;
}
/* The map runs off the right edge of the window, as in the PDF. */
.gw-contact-map{
  position:absolute;
  top:calc(35.5 * var(--gw-u));
  left:32.76%;
  right:calc(50% - 50vw);
  height:calc(224 * var(--gw-u));
}
.gw-contact-map iframe{display:block;width:100%;height:100%;border:0;}

.gw-contact-info{
  position:relative;
  max-width:330px;
  margin-left:32.76%;
  padding-top:calc(300 * var(--gw-u));
  font-size:max(15px, calc(11 * var(--gw-u)));
  line-height:1.45;
}
.gw-contact-info h2{
  margin:0 0 0.5em;
  color:var(--gw-brand-red);
  font-weight:700;
  font-size:max(16px, calc(12 * var(--gw-u)));
  letter-spacing:0.02em;
  text-transform:uppercase;
}
.gw-contact-info h3{margin:1.2em 0 0.3em;font-weight:700;font-size:inherit;}
.gw-contact-info p{margin:0;}
.gw-contact-info a{transition:color .15s;}
.gw-contact-info a:hover{color:var(--gw-brand-red);}
.gw-contact-lead{font-size:1.15em;}
.gw-contact-pin{
  position:absolute;
  left:calc(-38.5 * var(--gw-u));
  top:calc(323 * var(--gw-u));
  width:max(26px, calc(30 * var(--gw-u)));
  height:auto;
}

.gw-contact-decor{position:absolute;inset:0;pointer-events:none;}
.gw-contact .gw-mascot{--mw:7.76%;}
.gw-contact .gw-mascot--red{left:82.53%;top:calc(172.8 * var(--gw-u));}
.gw-contact .gw-mascot--orange{left:17.09%;top:calc(289.5 * var(--gw-u));}
/* Kept clear of the contact details when the text is larger than in the PDF. */
.gw-contact .gw-mascot--black{left:max(58.9%, calc(32.76% + 345px));top:calc(334.8 * var(--gw-u));}
.gw-contact .gw-mascot--gray{left:83.09%;top:calc(438.7 * var(--gw-u));}


/* ---------- "Segera Hadir" (planned pages that don't exist yet) ---------- */
.gw-soon{
  overflow:hidden;
  padding:56px 16px 88px;
  background:var(--gw-hero-red);
  color:#fff;
  text-align:center;
}
.gw-soon-mascot{
  position:relative;
  width:clamp(96px, 11vw, 140px);
  aspect-ratio:414 / 732;
  margin:0 auto 28px;
}
.gw-soon-mascot img{
  position:absolute;
  top:0;left:0;
  width:calc(100% * 830 / 414);
  max-width:none;
  translate:-29.64% -16.77%;
  pointer-events:none;
}
.gw-soon-kicker{
  margin:0 0 4px;
  font-weight:700;
  font-size:15px;
  letter-spacing:0.12em;
  text-transform:uppercase;
}
.gw-soon-title{
  margin:0;
  font-family:'Dancing Script',cursive;
  font-weight:700;
  font-size:clamp(52px, 7vw, 84px);
  line-height:1.1;
}
.gw-soon-text{
  max-width:30em;
  margin:14px auto 32px;
  font-size:19px;
  line-height:1.5;
}
.gw-soon-button{
  display:inline-block;
  padding:12px 28px;
  background:#fff;
  color:var(--gw-ink);
  font-weight:700;
  font-size:15px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  transition:background-color .15s;
}
.gw-soon-button:hover{background:var(--gw-footer);}

@media (prefers-reduced-motion:no-preference){
  .gw-mascot,
  .gw-soon-mascot img{animation:gw-bob 6s ease-in-out infinite;}
  .gw-mascot--red{animation-delay:-1.5s;}
  .gw-mascot--gray{animation-delay:-3s;}
  .gw-mascot--black{animation-delay:-4.5s;}
}
@keyframes gw-bob{50%{transform:translateY(-2%);}}


/* ---------- Footer ---------- */
.gw-site-footer{
  padding:calc(21 * var(--gw-u)) 16px;
  background:var(--gw-footer);
}
.gw-site-footer ul{display:flex;flex-wrap:wrap;justify-content:center;row-gap:12px;}
.gw-site-footer li + li{border-left:2px solid var(--gw-brand-red);}
.gw-site-footer a{
  display:block;
  padding:0 calc(20 * var(--gw-u));
  font-size:max(14px, calc(15 * var(--gw-u)));
  line-height:max(20px, calc(22 * var(--gw-u)));
  transition:color .15s;
}
.gw-site-footer a:hover{color:var(--gw-brand-red);}


/* ---------- Tablet & phone: stacked masthead, stacked pages ---------- */
@media (max-width:899px){
  .gw-masthead{background:none;}
  .gw-masthead-inner{height:auto;}

  .gw-masthead-lockup{
    position:static;
    display:block;
    width:auto;
    padding:18px 16px;
    background:var(--gw-orange);
  }
  .gw-masthead-lockup img{max-width:520px;}

  .gw-supporters{
    position:static;
    width:auto;
    padding:14px 16px 18px;
    background:var(--gw-gray);
    text-align:center;
  }
  .gw-supporters-label{margin:0 0 10px;font-size:11px;}
  .gw-supporters-logos{max-width:560px;margin-inline:auto;}

  .gw-tabbar-inner{padding:0 16px;}
  .gw-tabbar--photo{background:var(--gw-gray);margin-bottom:0;}
  .gw-tabs{margin-left:0;width:auto;}
  .gw-tabs a{height:44px;font-size:14px;}

  .gw-banner{aspect-ratio:2.4;}

  .gw-page-inner,
  .gw-page--portfolio .gw-page-inner{min-height:0;padding:32px 24px 40px;}
  .gw-page-title,
  .gw-page--pameran .gw-page-title,
  .gw-page--portfolio .gw-page-title{margin-left:0;}
  .gw-page-text,
  .gw-page--pameran .gw-page-text{width:auto;margin:16px 0 0;}
  .gw-page-card{
    position:static;
    display:block;
    width:140px;
    margin:32px auto 0;
  }
  .gw-page-lettering{position:static;display:block;width:min(60%, 300px);margin:20px 0 4px;}
  .gw-names{
    grid-template-columns:repeat(4, 1fr);
    column-gap:20px;
    margin:20px 0 0;
  }
  .gw-gallery{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:6px;
    width:auto;
    height:auto;
    margin:20px 0 0;
  }
  .gw-gallery img{width:100%;height:auto;aspect-ratio:4 / 3;}

  .gw-contact-inner{min-height:0;padding:24px 16px 32px;}
  .gw-contact-lettering{position:static;display:block;width:min(64%, 300px);margin:0 auto 20px;}
  .gw-contact-map{position:static;height:auto;aspect-ratio:4 / 3;margin:0 -16px 28px;}
  .gw-contact-info{max-width:none;margin-left:42px;padding-top:0;}
  .gw-contact-pin{left:-42px;top:28px;width:30px;}
  .gw-contact-decor{position:static;display:flex;justify-content:center;margin-top:24px;}
  .gw-contact .gw-mascot{position:static;width:25%;max-width:130px;translate:none;animation:none;}

  .gw-site-footer{padding:24px 16px;}
  .gw-site-footer a{padding:0 clamp(8px, 2.4vw, 16px);}
}

/* ---------- Phone: two-row tabs, two name columns ---------- */
@media (max-width:639px){
  .gw-tabs ul{flex-wrap:wrap;}
  .gw-tabs li{flex:1 1 24%;}

  .gw-landing-art{aspect-ratio:1 / 0.82;}
  .gw-landing-logo{left:8%;top:10%;width:84%;}
  .gw-landing-ruler{left:3%;top:86%;width:94%;}

  .gw-banner{aspect-ratio:2;}

  .gw-names{grid-template-columns:repeat(2, 1fr);row-gap:28px;}
  .gw-names ul{padding-right:0;border-right:0;}

  .gw-soon{padding:40px 16px 64px;}
  .gw-soon-text{font-size:17px;}

  /* Footer links wrap here, so drop the red rules (one would start a line). */
  .gw-site-footer ul{column-gap:24px;}
  .gw-site-footer li + li{border-left:0;}
  .gw-site-footer a{padding:0;}
}


/* =========================================================================
   Exhibition participants: Kata Sambutan columns, participant grid, profile
   page and the artwork gallery (Portofolio).
   ========================================================================= */
/*
  Exhibitor pages: Kata Sambutan, participant grid, profile page, artwork gallery.
  Loads after site.css and reuses its tokens (--gw-u, --gw-brand-red, --gw-ink ...).
*/

/* ---------- Pameran: welcome speech ---------- */
.gw-sambutan h2{
  margin:0 0 .6em;
  color:var(--gw-brand-red);
  font-size:max(17px, calc(15 * var(--gw-u)));
  line-height:1.25;
}
.gw-sambutan ol{margin:0 0 1em;padding-left:1.4em;}
.gw-sambutan li{margin-bottom:.6em;}
.gw-sign{margin-top:1.6em;}

/* ---------- Pameran: participants ---------- */
.gw-peserta{
  padding:calc(40 * var(--gw-u)) 0 calc(56 * var(--gw-u)) 11.29%;
  padding-right:10.8%;
}
.gw-peserta h2{
  margin:0 0 calc(18 * var(--gw-u));
  font-size:max(20px, calc(18 * var(--gw-u)));
  color:var(--gw-brand-red);
}
.gw-peserta h2 span{margin-left:.6em;color:var(--gw-ink);font-size:.7em;font-weight:500;}
.gw-peserta-grid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:calc(22 * var(--gw-u)) calc(16 * var(--gw-u));
  list-style:none;margin:0;padding:0;
}
.gw-peserta-grid a{display:block;}
.gw-peserta-photo{
  display:block;aspect-ratio:1;overflow:hidden;background:var(--gw-gray);
  border-bottom:3px solid var(--gw-brand-red);
}
.gw-peserta-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 12%;transition:transform .25s;}
.gw-peserta-grid a:hover img,.gw-peserta-grid a:focus-visible img{transform:scale(1.05);}
.gw-peserta-name{
  display:block;margin-top:.55em;
  font-weight:700;font-size:max(14px, calc(12 * var(--gw-u)));line-height:1.25;
}
.gw-peserta-dept{
  display:block;margin-top:.15em;
  color:var(--gw-brand-red);font-weight:600;font-size:max(12px, calc(10 * var(--gw-u)));
  text-transform:uppercase;letter-spacing:.05em;
}
/* The long welcome speech makes this page taller than the PDF frame. */
.gw-page--pameran .gw-page-inner{min-height:0;padding-bottom:calc(30 * var(--gw-u));}

/* ---------- Profile ---------- */
.gw-page--profile .gw-page-inner{min-height:0;padding:calc(36 * var(--gw-u)) 0 calc(56 * var(--gw-u));}
.gw-crumb{margin:0 0 calc(22 * var(--gw-u)) 11.29%;font-size:max(13px, calc(11 * var(--gw-u)));}
.gw-crumb a{color:var(--gw-brand-red);font-weight:600;}
.gw-profile{
  display:flex;gap:calc(34 * var(--gw-u));
  margin:0 10.8% 0 11.29%;align-items:flex-start;
}
.gw-profile-photo{
  flex:0 0 calc(210 * var(--gw-u));width:calc(210 * var(--gw-u));min-width:150px;
  border-bottom:4px solid var(--gw-brand-red);background:var(--gw-gray);
}
.gw-profile-photo img{display:block;width:100%;height:auto;}
.gw-profile-photo.is-empty{aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
.gw-profile-initials{font-size:56px;font-weight:700;color:#fff;}
.gw-profile-text{flex:1;min-width:0;max-width:44em;}
.gw-profile .gw-page-title{margin:0;font-size:max(26px, calc(26 * var(--gw-u)));}
.gw-profile-meta{margin:.4em 0 0;font-size:max(14px, calc(12 * var(--gw-u)));}
.gw-profile-meta span{color:var(--gw-brand-red);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.gw-label{
  margin:1.6em 0 .6em;
  color:var(--gw-brand-red);font-size:max(15px, calc(13 * var(--gw-u)));font-weight:700;
}
.gw-profile-text p{
  margin:0 0 1em;font-size:max(15px, calc(13 * var(--gw-u)));line-height:1.65;
}

/* ---------- Works ---------- */
.gw-works{margin:calc(34 * var(--gw-u)) 10.8% 0 11.29%;padding-top:calc(6 * var(--gw-u));border-top:2px solid var(--gw-brand-red);}
.gw-works > .gw-label{margin-top:.9em;}
.gw-works-intro{margin:0 0 1.2em;font-size:max(14px, calc(12 * var(--gw-u)));}
.gw-work{
  display:grid;grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:calc(26 * var(--gw-u));
  margin:0 0 calc(34 * var(--gw-u));align-items:start;
}
.gw-work-imgs{display:grid;gap:8px;grid-template-columns:1fr;}
.gw-work-imgs a{display:block;background:#fff;}
.gw-work-imgs img{display:block;width:100%;height:auto;}
.gw-work-imgs.is-multi{grid-template-columns:repeat(2, minmax(0, 1fr));}
.gw-work-imgs[data-count="3"],
.gw-work-imgs[data-count="5"],
.gw-work-imgs[data-count="6"],
.gw-work-imgs[data-count="9"],
.gw-work-imgs[data-count="12"]{grid-template-columns:repeat(3, minmax(0, 1fr));}
.gw-work-imgs[data-count="12"]{grid-template-columns:repeat(4, minmax(0, 1fr));}
.gw-work-text h3{margin:0 0 .3em;font-size:max(17px, calc(15 * var(--gw-u)));line-height:1.3;}
.gw-work-spec{
  margin:0 0 .9em;color:#5a5557;
  font-size:max(13px, calc(11 * var(--gw-u)));font-weight:600;
}
.gw-work-text p,.gw-work-note p{
  margin:0 0 1em;font-size:max(15px, calc(13 * var(--gw-u)));line-height:1.65;
}
.gw-work-note{max-width:44em;padding-top:calc(6 * var(--gw-u));}
.gw-work-note h3{margin:0 0 .5em;font-size:max(17px, calc(15 * var(--gw-u)));}

.gw-profile-nav{
  display:flex;justify-content:space-between;gap:16px;
  margin:calc(30 * var(--gw-u)) 10.8% 0 11.29%;padding-top:16px;border-top:1px solid #c8c8c8;
}
.gw-profile-nav a{font-weight:700;font-size:max(15px, calc(13 * var(--gw-u)));}
.gw-profile-nav a:last-child{text-align:right;}
.gw-profile-nav small{display:block;color:var(--gw-brand-red);font-weight:600;font-size:.8em;}

/* ---------- Portofolio: artwork gallery ---------- */
.gw-page--artworks .gw-page-inner{min-height:0;padding-bottom:calc(50 * var(--gw-u));}
.gw-art-count{margin:.5em 0 0 15.19%;font-size:max(14px, calc(12 * var(--gw-u)));color:#fff;}
.gw-art-grid{
  --h:calc(150 * var(--gw-u));
  display:flex;flex-wrap:wrap;gap:6px;
  margin:calc(26 * var(--gw-u)) 10.8% 0 11.29%;
}
.gw-art{
  position:relative;display:block;overflow:hidden;background:#777;
  height:max(110px, var(--h));
  flex:calc(var(--r) * 100) 1 calc(var(--r) * max(110px, var(--h)));
}
.gw-art img{display:block;width:100%;height:100%;object-fit:cover;max-width:none;transition:transform .3s;}
.gw-art:hover img,.gw-art:focus-visible img{transform:scale(1.04);}
.gw-art-cap{
  position:absolute;left:0;right:0;bottom:0;padding:22px 9px 7px;
  color:#fff;font-size:12px;line-height:1.3;
  background:linear-gradient(transparent, rgba(0,0,0,.72));
  opacity:0;transition:opacity .2s;
}
.gw-art-cap strong{display:block;font-size:13px;}
.gw-art:hover .gw-art-cap,.gw-art:focus-visible .gw-art-cap{opacity:1;}

/* ---------- Tablet / phone ---------- */
@media (max-width:899px){
  .gw-sambutan{width:auto;}
  .gw-peserta{padding:28px 24px 40px;}
  .gw-peserta-grid{grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px 12px;}
  .gw-crumb,.gw-profile,.gw-works,.gw-profile-nav{margin-left:24px;margin-right:24px;}
  .gw-profile{flex-direction:column;gap:20px;}
  .gw-profile-photo{width:min(60%, 260px);flex:none;}
  .gw-work{grid-template-columns:1fr;gap:14px;}
  .gw-art-count{margin-left:0;}
  .gw-art-grid{margin-left:0;margin-right:0;--h:130px;}
  .gw-art-cap{opacity:1;padding-top:18px;}
}
@media (max-width:639px){
  .gw-peserta-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .gw-work-imgs[data-count="12"]{grid-template-columns:repeat(3, minmax(0, 1fr));}
  .gw-art-grid{--h:100px;}
  .gw-art-cap strong{font-size:12px;}
  .gw-art-cap{font-size:11px;}
}

/* ---------- Pameran: welcome speech in columns ---------- */
.gw-sambutan{column-gap:calc(30 * var(--gw-u));}
.gw-sambutan h2{column-span:all;}
.gw-sambutan p,.gw-sambutan li{break-inside:avoid;}
.gw-sambutan > :nth-child(2){margin-top:0;}
@media (min-width:900px){
  .gw-page--pameran .gw-page-text.gw-sambutan{
    width:auto;
    margin:calc(176 * var(--gw-u)) 10.8% 0 22.2%;
    column-count:3;
  }
  .gw-page--pameran .gw-page-text.gw-sambutan > h2{margin-top:0;}
}
@media (max-width:899px){
  .gw-page--pameran .gw-page-text.gw-sambutan{column-count:2;}
}
@media (max-width:639px){
  .gw-page--pameran .gw-page-text.gw-sambutan{column-count:1;}
}

/* Full-body originals: zoom in on the face in the grid. */
.gw-peserta-grid a[href*="teddy-mohamad-darajat"] img{object-position:50% 0;transform:scale(2.6);transform-origin:50% 8%;}
.gw-peserta-grid a[href*="lalita-rachmania"] img{object-position:50% 0;transform:scale(2.4);transform-origin:50% 6%;}
.gw-peserta-grid a[href*="teddy-mohamad-darajat"]:hover img,
.gw-peserta-grid a[href*="lalita-rachmania"]:hover img{transform:scale(2.7);}

.gw-profile-contact{margin:1em 0 0;font-size:max(14px, calc(12 * var(--gw-u)));}
.gw-profile-contact a{color:var(--gw-brand-red);}