/* v48: one continuous studio photograph, including the navigation. */
.studio-option{font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}.studio-option .version{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap;min-height:26px;padding:5px 16px;box-sizing:border-box;background:#152438;color:#d5e0eb;font:11px/1.2 "Segoe UI",Arial,sans-serif}.version a{color:inherit}.version a[aria-current]{font-weight:700;text-decoration:underline;text-underline-offset:4px}
.studio-opening{position:relative;isolation:isolate;height:100svh;min-height:574px;color:#f4f7fa;background-image:url('/images/staged/studio-v48.jpg');background-size:cover;background-position:center center;background-repeat:no-repeat;overflow:hidden}
.studio-opening .site-nav{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:17px 4%;height:68px;min-height:0;box-sizing:border-box;background:transparent;border:0;max-width:none;font-family:"Segoe UI",Arial,sans-serif}.studio-opening .brand{display:flex;align-items:center;gap:10px;color:#f7f8fa;font-size:23px;font-weight:750;letter-spacing:-.6px;white-space:nowrap}.studio-opening .brand img{height:29px;width:29px}.studio-opening .site-nav>div{display:flex;align-items:center;gap:23px}.studio-opening .site-nav>div a{font-size:12px;color:#e4ecf5;white-space:nowrap}
.studio-hero{position:relative;height:calc(100% - 68px);min-height:0;max-height:none;background:none}
.studio-copy{position:absolute;left:4%;top:12%;width:29%;max-width:440px;z-index:1}.artist-line{font:13px/1.5 "Segoe UI",Arial,sans-serif;color:#dbe5f0;margin:0 0 17px}.artist-line strong{font-weight:650}.studio-copy h1{font:700 clamp(30px,3vw,46px)/1.09 "Segoe UI",Arial,sans-serif;letter-spacing:-1.3px;color:#f6f8fa;margin:0;text-wrap:balance}
.studio-actions{position:static;display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:25px}.studio-actions>a{display:flex;align-items:center;justify-content:center;min-width:180px;min-height:46px;box-sizing:border-box;padding:12px 18px;border:1px solid #e8eff5;border-radius:12px;background:#edf3f7;color:#152b42;font:650 12px/1.3 "Segoe UI",Arial,sans-serif;text-decoration:none;box-shadow:none}.studio-actions>a+a{background:rgba(28,48,70,.55);border-color:#a2b6ca80;color:#f3f7fb}.studio-actions>a:hover{background:#d6e5f0;color:#172e46}
.studio-frank{position:absolute;right:4%;top:3%;width:178px;color:#f6f8fa;background:none;border:0;z-index:1;text-decoration:none}.studio-frank>span{display:block;color:#d9e4ef;font:12px/1.5 "Segoe UI",Arial,sans-serif}.studio-frank strong{display:block;font:700 27px/1.16 "Segoe UI",Arial,sans-serif;letter-spacing:-.5px;margin:5px 0 11px}.studio-frank b{display:inline-block;font:650 12px/1.4 "Segoe UI",Arial,sans-serif;padding-bottom:5px;border-bottom:1px solid #d5b77a}.studio-frank:hover b{color:#f4cf89}.studio-opening a:focus-visible{outline:2px solid #efc67b;outline-offset:5px}
/* A: compact sculptural weight. */
.option-a .studio-copy{width:29%;top:13%}
/* B: broad, light headline above its horizontal button pair. */
.option-b .studio-copy{top:3%;width:53%;max-width:780px}.option-b .studio-copy h1{font-weight:350;font-size:clamp(31px,3.2vw,49px);line-height:1.12;letter-spacing:-1.3px;max-width:24ch}.option-b .studio-actions{flex-direction:row;flex-wrap:wrap;margin-top:23px;gap:10px}.option-b .studio-actions>a{border-radius:25px;min-width:170px}
/* C: lighter, close-set reading with restrained square-rounded controls. */
.option-c .studio-copy{width:30%;top:12%}.option-c .studio-copy h1{font-weight:400;font-size:clamp(30px,2.8vw,44px);line-height:1.15;letter-spacing:-.8px}.option-c .studio-actions>a{border-radius:8px;min-width:184px}
/* D: firm condensed rhythm, without detached buttons. */
.option-d .studio-copy{width:29%;top:13%}.option-d .studio-copy h1{font-family:Bahnschrift,"Segoe UI",Arial,sans-serif;font-weight:600;font-size:clamp(29px,2.8vw,44px);line-height:1.15;letter-spacing:-.65px}.option-d .studio-actions{margin-top:23px}.option-d .studio-actions>a{min-width:198px;border-radius:8px}
@media(min-width:761px) and (max-height:700px){.studio-copy{top:8%}.option-a .studio-copy,.option-c .studio-copy,.option-d .studio-copy{top:9%}.studio-copy h1{font-size:32px}.option-b .studio-copy h1{font-size:35px}.option-b .studio-copy{top:2%}.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:31px}.artist-line{margin-bottom:13px}.studio-actions{margin-top:21px}.studio-actions>a{min-height:43px;padding:11px 15px}.studio-frank{top:1%;width:166px}.studio-frank strong{font-size:25px}}
@media(max-width:1050px) and (min-width:761px){.studio-opening .site-nav>div{gap:15px}.studio-opening .brand{font-size:21px}.studio-opening .site-nav{padding-inline:3%}.studio-copy{left:3%}.studio-frank{right:3%;width:155px}.option-b .studio-actions>a{min-width:154px;font-size:11px}.option-b .studio-copy{width:54%}}
@media(max-width:760px){.studio-option .version{font-size:10px;gap:12px}.studio-opening{height:auto;min-height:980px;background-size:auto 100%;background-position:64% center}.studio-opening .site-nav{height:auto;padding:16px 20px;flex-direction:column;gap:14px}.studio-opening .site-nav>div{justify-content:center;gap:12px;flex-wrap:wrap}.studio-opening .site-nav>div a{font-size:11px}.studio-opening .brand{font-size:23px}.studio-hero{height:auto;min-height:860px;padding:24px 22px 480px;box-sizing:border-box;display:flex;flex-direction:column;gap:24px}.studio-copy,.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{position:static;width:100%;max-width:none}.studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:34px;max-width:18ch;line-height:1.1;letter-spacing:-1px}.studio-actions,.option-b .studio-actions{flex-direction:row;gap:8px;flex-wrap:wrap;margin-top:20px}.studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:0;min-height:44px;padding:11px 13px;font-size:11px}.studio-frank{position:static;align-self:flex-end;width:200px;text-align:right}.studio-frank strong{font-size:26px}}
.chooser{margin:0;background:#15263b;color:#edf4fa;font-family:"Segoe UI",Arial,sans-serif}.chooser main{max-width:1200px;margin:auto;padding:40px 24px}.chooser h1{font-size:clamp(32px,4vw,52px);letter-spacing:-1.5px}.chooser p{color:#c3d3e3}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:32px}.choice{padding:22px;color:inherit;text-decoration:none;border:1px solid #496079;border-radius:14px;background:#1a3049}.choice>span{font-size:13px;color:#c8ac7b}.choice h2{font-size:24px;margin:8px 0 15px}.choice img{display:block;width:100%;aspect-ratio:1.6;object-fit:cover;border-radius:6px}.choice b{display:inline-block;margin-top:18px;font-size:14px}.choice:hover{background:#243e59}@media(max-width:620px){.choices{grid-template-columns:1fr}}
@media(min-width:761px){.studio-frank{width:230px;top:0}.studio-frank strong{margin-bottom:8px}}
@media(min-width:761px){.studio-frank{right:19%}}
@media(max-width:760px){.studio-opening{height:calc(100vw * 1.7778);min-height:700px;background-image:url(/images/staged/studio-mobile-v48.jpg);background-size:100% auto;background-position:center bottom;background-color:#0c1525}.studio-opening .site-nav{padding:12px 15px;gap:8px}.studio-opening .site-nav>div{gap:9px}.studio-opening .brand{font-size:21px}.studio-hero{min-height:0;padding:18px 20px 0;gap:18px}.studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:29px;line-height:1.1;max-width:20ch}.artist-line{margin-bottom:10px}.studio-frank{width:210px}.studio-frank strong{font-size:24px;margin:3px 0 5px}.studio-actions,.option-b .studio-actions{margin-top:15px}}

/* v49: one restrained Segoe UI family, B-based opening, matched transparent CTAs. */
.studio-opening,.studio-opening *{font-family:"Segoe UI",Arial,sans-serif}
.studio-opening{background-image:url('/images/staged/studio-v48.jpg');background-size:cover;background-position:center center}
.studio-opening .site-nav{height:76px;padding:18px 4%;border:0;background:transparent;box-shadow:none}
.studio-opening .brand{font-size:24px;font-weight:600;letter-spacing:-.5px}.studio-opening .brand img{width:30px;height:30px}
.studio-opening .site-nav>div a{font-size:13px;font-weight:400}
.studio-hero{height:calc(100% - 76px)}
.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{left:4%;top:4%;width:53%;max-width:780px}
.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-family:"Segoe UI",Arial,sans-serif;font-weight:350;font-size:clamp(32px,3.2vw,49px);line-height:1.12;letter-spacing:-1.2px;max-width:24ch}
.artist-line{font-size:13px;font-weight:400}.artist-line strong{font-weight:600}
.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{display:flex;flex-direction:row;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:172px;min-height:45px;padding:12px 18px;border:1px solid rgba(176,195,213,.45);border-radius:24px;background:transparent;color:#f3f6fa;font-size:12px;font-weight:500;box-shadow:none}
.studio-actions>a:hover,.studio-actions>a+a:hover{background:rgba(210,228,245,.12);color:#fff;border-color:#b5c8d9}
.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{left:4%;right:auto;top:auto;bottom:12%;width:285px;background:transparent}
.studio-frank>span{font-size:16px;line-height:1.5;color:#e3ebf3;font-weight:400}.studio-frank strong{font-size:27px;font-weight:600;line-height:1.2;margin:3px 0 12px}.studio-frank b{font-size:13px;font-weight:500;border-bottom:1px solid #a8bbcd;padding-bottom:5px}
/* A: wide, open masthead and unboxed navigation. */
.option-a .studio-opening{background-position:50% 50%}
/* B: softly framed inset masthead; no hard divider. */
.option-b .site-nav{margin:12px 3% 0;width:94%;height:62px;padding:12px 22px;border-radius:16px;background:rgba(10,25,43,.25)}
.option-b .studio-hero{height:calc(100% - 74px)}.option-b .studio-opening{background-size:104% auto;background-position:56% 52%}
.option-b .studio-copy,.option-b .studio-frank{left:5%}
/* C: centered signature with a separate, evenly spaced navigation line. */
.option-c .site-nav{height:112px;flex-direction:column;justify-content:center;gap:14px;padding:16px 4%}
.option-c .brand{font-size:25px}.option-c .site-nav>div{gap:30px}.option-c .studio-hero{height:calc(100% - 112px)}
.option-c .studio-copy{top:1%;left:4%}.option-c .studio-opening{background-size:102% auto;background-position:42% 52%}
.option-c .studio-frank{bottom:10%}
/* D: left signature and navigation tucked into a compact upper-right block. */
.option-d .site-nav{height:94px;align-items:flex-start;padding-top:23px}
.option-d .site-nav>div{max-width:380px;justify-content:flex-end;flex-wrap:wrap;gap:9px 24px}
.option-d .brand{padding-top:5px}.option-d .studio-hero{height:calc(100% - 94px)}
.option-d .studio-copy{top:2%;left:5%}.option-d .studio-frank{left:5%;bottom:10%}
.option-d .studio-opening{background-size:105% auto;background-position:64% 54%}
@media(min-width:761px) and (max-height:700px){.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{top:2%;width:55%}.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:35px}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:20px}.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{bottom:9%}.studio-frank>span{font-size:15px}.studio-frank strong{font-size:26px}}
@media(max-width:1050px) and (min-width:761px){.studio-opening .site-nav>div{gap:15px}.studio-opening .site-nav>div a{font-size:12px}.option-d .site-nav>div{max-width:320px;gap:9px 18px}.option-c .site-nav>div{gap:23px}.option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:160px}}
@media(max-width:760px){.option-a .studio-opening,.option-b .studio-opening,.option-c .studio-opening,.option-d .studio-opening{height:auto;min-height:980px;background-size:auto 100%;background-position:64% center}.studio-opening .site-nav,.option-b .site-nav,.option-c .site-nav,.option-d .site-nav{height:auto;width:100%;margin:0;padding:16px 20px;flex-direction:column;align-items:center;gap:14px;background:none;border-radius:0}.studio-opening .brand{font-size:23px}.studio-opening .site-nav>div,.option-d .site-nav>div{max-width:none;justify-content:center;gap:10px 14px;flex-wrap:wrap}.studio-opening .site-nav>div a{font-size:11px}.studio-hero,.option-b .studio-hero,.option-c .studio-hero,.option-d .studio-hero{height:auto;min-height:860px;padding:22px 22px 480px;display:flex;flex-direction:column;gap:25px}.option-a .studio-copy,.option-b .studio-copy,.option-c .studio-copy,.option-d .studio-copy{position:static;width:100%;max-width:none}.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:34px;max-width:18ch}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:20px;gap:8px}.option-a .studio-actions>a,.option-b .studio-actions>a,.option-c .studio-actions>a,.option-d .studio-actions>a{min-width:0;padding:11px 13px;font-size:11px}.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{position:static;align-self:flex-start;text-align:left;width:285px}.studio-frank>span{font-size:15px}}

/* Final v49 fixes: navigation must never blur the artwork beneath it. */
.studio-opening .site-nav{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;filter:none}
@media(max-width:760px){
.option-a .studio-opening,.option-b .studio-opening,.option-c .studio-opening,.option-d .studio-opening{height:max(740px,calc(100vw * 1.7778));min-height:0;background-image:url('/images/staged/studio-mobile-v48.jpg');background-size:100% auto;background-position:center bottom}
.studio-opening .site-nav,.option-b .site-nav,.option-c .site-nav,.option-d .site-nav{padding:12px 15px;gap:8px}
.studio-opening .brand{font-size:21px}.studio-opening .site-nav>div,.option-d .site-nav>div{gap:9px 12px}
.studio-hero,.option-b .studio-hero,.option-c .studio-hero,.option-d .studio-hero{height:auto;min-height:0;padding:18px 20px 0;gap:20px}
.option-a .studio-copy h1,.option-b .studio-copy h1,.option-c .studio-copy h1,.option-d .studio-copy h1{font-size:29px;line-height:1.1;max-width:20ch}
.artist-line{margin-bottom:10px}.option-a .studio-actions,.option-b .studio-actions,.option-c .studio-actions,.option-d .studio-actions{margin-top:15px}
.option-a .studio-frank,.option-b .studio-frank,.option-c .studio-frank,.option-d .studio-frank{width:270px}.studio-frank>span{font-size:14px}.studio-frank strong{font-size:24px;margin:3px 0 7px}
}

/* ===================================================================
   RESPONSIVE STUDIO FRAMING - three photographs of the same scene,
   one per shape of window. Nothing stretched, nothing cropped off
   the floor.

   One 1.6 image could not do this: anchored to the floor, the tulip
   height and the size of the glass are the same dial, so enlarging
   the glass put the tulips behind the menu and clearing the menu
   shrank the glass. Three framings solve it at the source.

   v52: the vessel sits back behind the sphere with its base higher
   in the frame, and the floor is matte again rather than a mirror.
=================================================================== */

@media (min-aspect-ratio:37/20){
  .option-a .studio-opening{
    background-image:url('/images/staged/studio-wide-v55.jpg');
    background-size:cover; background-position:center bottom;
  }
}
@media (min-aspect-ratio:1/1) and (max-aspect-ratio:37/20){
  .option-a .studio-opening{
    background-image:url('/images/staged/studio-standard-v55.jpg');
    background-size:cover; background-position:center bottom;
  }
}
@media (max-aspect-ratio:1/1){
  .option-a .studio-opening{
    background-image:url('/images/staged/studio-portrait-v55.jpg');
    background-size:cover; background-position:center bottom;
  }
}

/* ===================================================================
   v50: the Frank story joins the left column instead of hanging off
   the bottom edge. Same corner, same alignment - it just stops being
   pinned to the floor, where on a television it fell below the fold
   and clipped the underline of its own link.
=================================================================== */

@media (min-width:761px){
  .option-a .studio-hero{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    padding:32px 0 0 4%;
    box-sizing:border-box;
  }
  .option-a .studio-copy{position:static;width:53%;max-width:780px}
  .option-a .studio-frank{
    position:static;
    left:auto;right:auto;top:auto;bottom:auto;
    width:285px;
    margin:46px 0 0;
    padding-top:18px;
    border-top:1px solid rgba(176,195,213,.30);
  }
  .option-a .studio-frank>span{font-size:13px;line-height:1.5;color:#dbe5f0}
  .option-a .studio-frank strong{font-size:27px;font-weight:600;line-height:1.2;letter-spacing:-.4px;margin:4px 0 13px}
  .option-a .studio-frank b{font-size:13px;font-weight:600;color:#f6f8fa}
}

/* The television: shorter hero, so the column tightens a few pixels. */
@media (min-width:761px) and (max-height:700px){
  .option-a .studio-hero{padding-top:10px}
  .option-a .studio-frank{margin-top:38px;padding-top:16px}
}

/* Narrow desktop windows: the glass sits further left, so the block
   narrows to keep clear of it. */
@media (min-width:761px) and (max-width:1050px){
  .option-a .studio-frank{width:215px}
}

/* Phones: already in the flow under the buttons - just add the rule. */
@media (max-width:760px){
  .option-a .studio-frank{
    width:285px;max-width:100%;
    margin-top:4px;padding-top:16px;
    border-top:1px solid rgba(176,195,213,.30);
  }
  .option-a .studio-frank>span{font-size:13px}
  .option-a .studio-frank strong{font-size:24px;margin:3px 0 11px}
  .option-a .studio-frank b{font-size:13px}
}

/* One warm accent, matching the glass. A link, not a button. */
.studio-frank{transition:border-top-color .2s}
.studio-frank b{border-bottom:1px solid #d5b77a;padding-bottom:5px}
.studio-frank:hover b{color:#f4cf89;border-bottom-color:#f4cf89}
.studio-frank:hover{border-top-color:rgba(213,183,122,.5)}
.studio-opening a:focus-visible{outline:2px solid #efc67b;outline-offset:6px;border-radius:3px}

/* ===================================================================
   THE CHOSEN OPENING - option 3, with Igal's corrections.

   A hairline runs down the frame at 7.5% and everything hangs off it.
   The identity line is rotated along that rule rather than stacked
   above the headline, which is what stops the left side reading as a
   plain column of lines. The menu stays exactly where it was, top
   right. Headline and buttons sit higher than before, and the Frank
   entry comes back to the same left edge as the logo, the headline
   and the buttons - so all the type occupies one band and the glass
   is left alone on the right.

   Desktop only. Below 761px the opening keeps its stacked flow,
   which is the right answer on a phone.
=================================================================== */
@media (min-width:761px){

  /* the rule everything hangs from */
  .option-a .studio-opening::before{
    content:''; position:absolute; left:7.5%; top:0; bottom:0; width:1px;
    background:rgba(195,216,240,.26); z-index:2; pointer-events:none;
  }

  .option-a .studio-hero{
    position:static; display:block; height:auto; padding:0; min-height:0;
  }

  /* the logo keeps its place; the name beside the mark in the narrow face */
  .option-a .studio-opening .brand{
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-weight:700 !important; letter-spacing:.02em !important;
  }

  /* the menu does not move */
  .option-a .studio-opening .site-nav > div a{
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:clamp(9px,.72vw,11.5px) !important;
    letter-spacing:.13em; text-transform:uppercase; color:#a8bed8 !important;
  }

  /* identity, turned onto the rule */
  .option-a .artist-line{
    position:absolute; left:7.5%; top:50%; z-index:3; margin:0 !important;
    transform:translate(-50%,-50%) rotate(-90deg); white-space:nowrap;
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:clamp(8px,.7vw,11px) !important; font-weight:500 !important;
    letter-spacing:.3em; text-transform:uppercase; color:#93a9c4 !important;
  }
  .option-a .artist-line strong{ font-weight:600 !important; color:#b9cbe2 !important; }

  /* the headline, lifted, in the serif */
  .option-a .studio-copy{
    position:absolute; left:10%; top:25%; width:41%; max-width:none; z-index:3;
  }
  .option-a .studio-copy h1{
    margin:0 !important;
    font-family:'DM Serif Display',Georgia,serif !important;
    font-weight:400 !important;
    font-size:clamp(22px,3.5vw,58px) !important;
    line-height:1 !important; letter-spacing:-.015em !important; color:#fff !important;
  }
  .option-a .studio-copy h1 i{ font-style:italic; color:#eac184; }

  /* the buttons, lifted, out of the copy block */
  .option-a .studio-actions{
    position:absolute; left:10%; top:60%; z-index:3;
    display:flex; flex-direction:row; gap:10px; margin:0 !important;
  }
  .option-a .studio-actions > a{
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:clamp(10px,.82vw,13px) !important; font-weight:400 !important;
    letter-spacing:.06em; min-width:9.5em; min-height:0;
    padding:.78em 1.2em; border-radius:40px;
    border:1px solid rgba(206,221,238,.5) !important;
    background:transparent !important; color:#f2f6fb !important;
  }
  .option-a .studio-actions > a:hover{ background:rgba(234,193,132,.12) !important; border-color:#eac184 !important; }

  /* Frank, back on the same left edge as everything else */
  .option-a .studio-frank{
    position:absolute; left:10%; right:auto; top:auto; bottom:9%;
    width:25%; margin:0; z-index:3;
    padding-top:.7em; border-top:1px solid rgba(234,193,132,.5);
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:clamp(9px,.74vw,11.5px) !important; line-height:1.5 !important;
    color:#c6d6e9 !important;
  }
  .option-a .studio-frank > span{
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:inherit !important; color:#c6d6e9 !important;
  }
  .option-a .studio-frank strong{
    display:block; margin:.1em 0 .25em !important;
    font-family:'DM Serif Display',Georgia,serif !important;
    font-weight:400 !important; font-size:clamp(13px,1.3vw,20px) !important;
    line-height:1.15 !important; letter-spacing:0 !important; color:#fff !important;
  }
  .option-a .studio-frank b{
    font-family:'Archivo Narrow',system-ui,sans-serif !important;
    font-size:inherit !important; font-weight:400 !important;
    border-bottom:1px solid #eac184; padding-bottom:4px; color:#f2dcb3 !important;
  }
  .option-a .studio-frank:hover b{ color:#fff !important; border-bottom-color:#fff; }
}

/* ---- the text field is NOT the same width on every framing ---------
   Measured off the photographs themselves: the glass begins at 44% of
   the wide framing but at only 34% of the standard one, and above 40%
   of the standard frame's height it is clear out to 52%. So the
   headline column cannot be one fixed width - on a laptop-shaped
   window it has to be narrower and set smaller, and it has to finish
   above that 40% line.
------------------------------------------------------------------ */
@media (min-width:761px) and (min-aspect-ratio:37/20){
  .option-a .studio-copy{ width:34%; }
  .option-a .studio-copy h1{ font-size:clamp(22px,3.2vw,54px) !important; }
}
@media (min-width:761px) and (max-aspect-ratio:37/20){
  .option-a .studio-copy{ width:39%; top:23%; }
  .option-a .studio-copy h1{ font-size:clamp(20px,2.5vw,40px) !important; }
  .option-a .studio-actions{ top:54%; }
  .option-a .studio-frank{ width:28%; }
}

/* ---- the identity line, set properly on its rule -------------------
   rotate() combined with translate() moved it along the rotated axes,
   which pushed the text sideways into the headline. writing-mode does
   the same job without that trap: the line runs up the rule and its
   box stays the width of the type, not its length.
------------------------------------------------------------------ */
@media (min-width:761px){
  .option-a .artist-line{
    writing-mode:vertical-rl;
    transform:translate(-50%,-50%) rotate(180deg);
    max-height:46%;
  }
}

/* ---- match the approved mock exactly on the wide framing -----------
   Measured off notes/hero-mine.html option 3 at its own 2.21 box:
   headline 41% wide at 45px (3.67vw), identity on the rule at 7%,
   buttons and Frank at 10%. I had tightened these to 34% and 40px to
   keep clear of the glass, which is why the live page read smaller
   than the version Igal approved. The box width is a maximum, not the
   rendered line length - the text wraps well before the vessel at
   44%, which the mock already demonstrates.

   His three changes on top of the mock: the headline higher (30% ->
   25%), the buttons higher (70% -> 60%), and Frank moved from the
   centre at 52% back to the left edge at 10%.
------------------------------------------------------------------ */
@media (min-width:761px) and (min-aspect-ratio:37/20){
  .option-a .studio-copy{ width:41%; top:25%; }
  .option-a .studio-copy h1{ font-size:clamp(24px,3.67vw,58px) !important; }
  .option-a .studio-actions{ top:60%; }
  .option-a .studio-frank{ left:10%; width:25%; bottom:9%; }
}

/* ---- the headline was set solid ------------------------------------
   line-height:1 with a 47px serif puts the three lines almost touching,
   which is the squashing Igal pointed at. Letter-spacing was pulled in
   as well. Both go back to normal distance.
------------------------------------------------------------------ */
@media (min-width:761px){
  .option-a .studio-copy h1{
    line-height:1.14 !important;
    letter-spacing:-.005em !important;
  }
  /* the gold italic sits on the same rhythm */
  .option-a .studio-copy h1 i{ letter-spacing:0; }
}

/* ===================================================================
   FOUR CORRECTIONS, from Igal's own screenshot.

   1. The italic was never loaded. The font link asked for DM Serif
      Display with no italic variant, so the browser was faking one by
      slanting the roman - which is why "So Much Movement." looked
      like a different typeface. The real italic is loaded now.
   2. The headline goes back to solid. I loosened it because the lines
      looked squashed to me; he meant the wordmark, not the headline.
   3. "Glass In Action" was set in Archivo NARROW - a condensed face.
      That is the squashing. It goes back to normal width.
   4. The rail must stop before it runs into the wordmark at the top.
=================================================================== */
@media (min-width:761px){

  /* 1 + 2: the headline exactly as in the approved image */
  .option-a .studio-copy h1{
    line-height:1 !important;
    letter-spacing:-.015em !important;
  }
  .option-a .studio-copy h1 i{
    font-family:'DM Serif Display',Georgia,serif !important;
    font-style:italic !important;
    font-synthesis:none;          /* never fake it again */
    letter-spacing:-.015em;
  }

  /* 3: the wordmark at normal width, not condensed */
  .option-a .studio-opening .brand{
    font-family:'Archivo',system-ui,sans-serif !important;
    font-weight:700 !important;
    letter-spacing:-.01em !important;
  }

  /* 4: the rail starts below the wordmark and the menu */
  .option-a .studio-opening::before{
    top:17%;
  }

  /* the identity line re-centres inside the shortened rail */
  .option-a .artist-line{ top:56%; }

  /* Frank, a little higher */
  .option-a .studio-frank{ bottom:13%; }
}

/* ---- the column was too narrow for the sentence --------------------
   Measured the wide photograph band by band: the glass does not start
   at 44% all the way up. Across the headline's own band it begins at
   49%, and higher still at 52-55%. Holding the column to 44% for the
   full height forced "Still" onto the second line.

   Column now runs to 47%, and the face comes down from 47px to the
   ~41px of the approved screenshot, so the sentence breaks where Igal
   wants it:  How Something So Still / Can Have So Much / Movement.
------------------------------------------------------------------ */
@media (min-width:761px) and (min-aspect-ratio:37/20){
  .option-a .studio-copy{ width:37%; top:24%; }
  .option-a .studio-copy h1{ font-size:clamp(22px,3.2vw,52px) !important; }
}

/* ---- the breaks are a decision, not an accident --------------------
   Fluid type in a fluid column means the wrap point moves with the
   window, which is why "Still" kept falling to the second line. The
   three lines are now explicit. The face is sized so the longest of
   them - "How Something So Still" - still finishes inside the clear
   zone, which is 49% across in this band.
------------------------------------------------------------------ */
@media (min-width:761px){
  .option-a .studio-copy h1 br.hb{ display:block; }
}
@media (max-width:760px){
  .option-a .studio-copy h1 br.hb{ display:none; }
}
@media (min-width:761px) and (min-aspect-ratio:37/20){
  .option-a .studio-copy{ width:39%; }
  .option-a .studio-copy h1{ font-size:clamp(22px,2.75vw,46px) !important; }
}

/* ===================================================================
   MOBILE OPENING - from the pressure test.

   At 390 the Frank invitation sat on top of the lit sphere and the
   vessel, white on bright amber, and the right button met a tulip.
   The artwork is not touched. Instead the top of the frame gets a
   soft dark field - the same navy the backdrop already is - so the
   type has somewhere to live, and the whole column is tightened so it
   finishes above the glass.
=================================================================== */
@media (max-width:760px){
  /* a text-safe field, darkest at the top, gone before the glass */
  .option-a .studio-opening::after{
    content:''; position:absolute; left:0; right:0; top:0; height:58%;
    background:linear-gradient(180deg,
      rgba(6,16,40,.92) 0%, rgba(6,16,40,.88) 42%,
      rgba(6,16,40,.62) 72%, rgba(6,16,40,0) 100%);
    z-index:1; pointer-events:none;
  }
  .option-a .studio-hero,
  .option-a .studio-opening .site-nav{ position:relative; z-index:2; }

  /* tighten the column so it finishes before the artwork */
  .option-a .studio-hero{
    padding:14px 20px 0 !important;
    min-height:0 !important; height:auto !important;
    gap:0 !important;
  }
  .option-a .artist-line{
    position:static !important; transform:none !important;
    writing-mode:horizontal-tb !important;
    margin:0 0 8px !important;
    font-size:12px !important; letter-spacing:.1em; text-transform:uppercase;
    color:#b9cbe2 !important;
  }
  .option-a .studio-copy{ position:static !important; width:100% !important; }
  .option-a .studio-copy h1{
    font-size:clamp(26px,7.4vw,34px) !important;
    line-height:1.12 !important; margin:0 !important;
  }
  .option-a .studio-actions{
    position:static !important; margin:16px 0 0 !important;
    display:flex; flex-wrap:wrap; gap:8px;
  }
  .option-a .studio-actions > a{
    min-width:0; flex:0 1 auto; padding:.7em 1em;
    font-size:12px !important; min-height:44px;
  }
  /* the invitation sits with the rest, inside the dark field */
  .option-a .studio-frank{
    position:static !important; width:auto !important;
    margin:18px 0 0 !important; bottom:auto !important; left:auto !important;
    padding-top:12px; border-top:1px solid rgba(234,193,132,.5);
  }
  .option-a .studio-frank > span{ font-size:12px !important; }
  .option-a .studio-frank strong{ font-size:21px !important; margin:2px 0 6px !important; }
  .option-a .studio-frank b{ font-size:12px !important; display:inline-block; min-height:44px; line-height:44px; }

  /* the rail is a desktop device only */
  .option-a .studio-opening::before{ display:none; }
}

/* ---- mobile: the invitation still reached the vessel ---------------
   Frank's block finished at 57% of the frame and the glass begins
   around 48%, so "Read the story" sat on the patterned vessel. Every
   element above it gives up a few pixels, and the dark field holds
   its opacity further down.
------------------------------------------------------------------ */
@media (max-width:760px){
  .option-a .studio-opening::after{
    height:64%;
    background:linear-gradient(180deg,
      rgba(6,16,40,.94) 0%, rgba(6,16,40,.92) 55%,
      rgba(6,16,40,.72) 80%, rgba(6,16,40,0) 100%);
  }
  .option-a .studio-opening .site-nav{ padding:10px 20px !important; gap:6px !important; }
  .option-a .studio-hero{ padding-top:8px !important; }
  .option-a .artist-line{ margin-bottom:6px !important; font-size:11px !important; }
  .option-a .studio-copy h1{ font-size:clamp(23px,6.6vw,30px) !important; }
  .option-a .studio-actions{ margin-top:12px !important; }
  .option-a .studio-actions > a{ min-height:42px; padding:.6em .9em; }
  .option-a .studio-frank{ margin-top:11px !important; padding-top:9px; }
  .option-a .studio-frank strong{ font-size:19px !important; margin:1px 0 3px !important; }
  .option-a .studio-frank b{ min-height:40px; line-height:40px; }
}

/* ===================================================================
   1. MOBILE: THE ARCHIVE INTRODUCTION WAS IN TWO COLUMNS.

   option-b.css sets .archive-introduction to 1.1fr 1fr with no media
   query, so it overrides the single column style.css declares for
   mobile. On top of that .band-head is display:contents there, and
   only the eyebrow, the h2 and the first paragraph are given grid
   rows - so the remaining paragraphs auto-placed into the second
   column and the heading ended up beside the prose.

   One column, normal reading order, nothing else touched.
=================================================================== */
@media (max-width:760px){
  .archive-introduction{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .archive-introduction .band-head{ display:block !important; }
  .archive-introduction .band-head > *,
  .archive-introduction > figure{ grid-row:auto !important; }
  .archive-introduction .band-lede{ margin:0 0 12px; }
  .archive-introduction > figure{ margin-top:4px; }
}

/* ===================================================================
   5. LOW-RESOLUTION DESKTOP: THE SUPPORTING TYPE WAS TOO SMALL.

   Measured at 1024x600: artist credit 8px and turned on its side,
   navigation 9px, button labels 10px, Frank's qualifier 9px. All of
   it below a readable minimum, and the identity - the one line that
   says whose work this is - was the hardest thing on the screen to
   read.

   Minimums raised, and the rotated credit is now reserved for windows
   wide enough to carry it. Below 1200px it sits horizontally above
   the headline, where it reads normally.
=================================================================== */
@media (min-width:761px){
  .option-a .studio-opening .site-nav > div a{ font-size:max(12px,.78vw) !important; }
  .option-a .studio-actions > a{
    font-size:max(13px,.85vw) !important;
    min-height:44px; padding:.7em 1.15em;
  }
  .option-a .studio-frank{ font-size:max(12px,.8vw) !important; }
  .option-a .studio-frank > span{ font-size:max(12px,.8vw) !important; }
  .option-a .studio-frank strong{ font-size:max(18px,1.35vw) !important; }
  .option-a .studio-frank b{
    font-size:max(12px,.8vw) !important;
    display:inline-block; min-height:34px; line-height:30px;
  }
  .option-a .artist-line{ font-size:max(12px,.78vw) !important; }
}

/* the credit only goes on the rail where there is room for it */
@media (min-width:761px) and (max-width:1199px){
  .option-a .studio-opening::before{ display:none; }
  .option-a .artist-line{
    position:absolute !important; left:10% !important; top:17% !important;
    transform:none !important; writing-mode:horizontal-tb !important;
    max-height:none !important; white-space:nowrap;
    letter-spacing:.14em; text-transform:uppercase;
  }
  .option-a .studio-copy{ top:23% !important; }
}

/* ===================================================================
   4. MOBILE STORY PANELS WERE TOO NARROW AND TOO SHORT.

   At 390 the glass grid is two 165px columns, so a story opened into
   a 165px-wide panel - three or four words a line. And a long archive
   story had a 198px reading window for 1272px of text.

   A card being read takes the whole width for as long as it is open,
   and the panel gets a bounded but generous height with a visible cue
   that there is more below. Nothing covers a neighbouring piece, the
   page does not jump, and closing returns the card to its place.
=================================================================== */
@media (max-width:760px){

  /* the card being read takes the full row */
  .work-grid > .sliding-work.story-open,
  .work-grid > .work-item.story-open{
    grid-column:1 / -1 !important;
  }

  /* a readable, bounded reading height */
  .sliding-work.story-open .work-story,
  .archive-card.story-open .work-story{
    max-height:min(58vh,480px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    padding-right:12px;
    scrollbar-width:thin;
    scrollbar-color:rgba(234,193,132,.55) transparent;
  }
  .sliding-work.story-open .work-story::-webkit-scrollbar{ width:4px; }
  .sliding-work.story-open .work-story::-webkit-scrollbar-thumb{
    background:rgba(234,193,132,.55); border-radius:4px;
  }

  /* the cue: the text fades at the foot while there is more to read */
  .sliding-work.story-open,
  .archive-card.story-open{ position:relative; }
  .sliding-work.story-open .work-story{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.25) 100%);
            mask-image:linear-gradient(180deg,#000 0,#000 88%,rgba(0,0,0,.25) 100%);
  }
  .sliding-work.story-open .work-story p{ font-size:15px; line-height:1.65; }
}

/* ===================================================================
   FIRST-PAGE NOTES FROM IGAL'S WALKTHROUGH.

   - the buttons lift a little
   - the rule above Frank Stella stays exactly where it is
   - "Read the story" loses its underline and takes an arrow instead
   - the vertical credit moves further left, away from the headline:
     set on its side so close to the text it was hard to read
=================================================================== */
@media (min-width:761px){

  /* buttons a little higher */
  .option-a .studio-actions{ top:56% !important; }

  /* the credit and its rail move left, off the headline */
  .option-a .studio-opening::before{ left:5%; }
  .option-a .artist-line{ left:5% !important; }

  /* an arrow instead of a rule under the link */
  .option-a .studio-frank b{
    border-bottom:0 !important;
    padding-bottom:0 !important;
    display:inline-flex; align-items:center; gap:.45em;
    min-height:0; line-height:1.3;
  }
  .option-a .studio-frank b::after{
    content:'\2192';            /* → */
    font-size:1.05em; line-height:1;
    transform:translateX(0);
    transition:transform .22s ease;
  }
  .option-a .studio-frank:hover b::after{ transform:translateX(4px); }
}

/* the same on mobile: no rule under the link, arrow beside it */
@media (max-width:760px){
  .option-a .studio-frank b{
    border-bottom:0 !important;
    display:inline-flex; align-items:center; gap:.45em;
    min-height:40px;
  }
  .option-a .studio-frank b::after{ content:'\2192'; font-size:1.05em; }
}

/* The Glass grid is sized by gallery-v43.css: each figure carries its
   own --glass-ratio inline and the plate AND the caption are set to
   --glass-height x ratio, which is what kept every caption centred
   under its own picture at the picture-s own width. Overriding the
   heights here flattened that engine and broke the centring, so the
   sizing is tuned through --glass-height further down instead. */


/* ---- the bands need to announce themselves ------------------------
   Igal: moving from the glass into Frank, and from Frank into Why
   Glass, and again into The Work, the ground barely changes - you
   cannot tell the subject has changed. A hairline and a real step in
   tone at each seam, using the palette already in the file.
------------------------------------------------------------------ */
body #frank{ border-top:1px solid rgba(217,164,65,.28); }
body #why-glass{ border-top:1px solid rgba(217,164,65,.28); }
body #work-for-frank{ border-top:1px solid rgba(217,164,65,.28); }
body #how-its-made{ border-top:1px solid rgba(217,164,65,.28); }

/* ---- the two lines that should stand up --------------------------- */
body .origin-sub,
body h3.origin-sub{
  margin-top:clamp(3.6rem,6.5vw,5.6rem) !important;
  padding-top:1.4rem;
  border-top:2px solid rgba(217,164,65,.6);
  font-style:italic;
  color:#f2e3c4 !important;
}

/* ==================================================================
   TYPOGRAPHY — items 1, 19, 20, 21
   Igal: "a new font and huge", "four or five across the opening
   alone", "it is starting to look like a Christmas light."

   The cause was not taste, it was wiring. The page downloads three
   families - Archivo, Archivo Narrow, DM Serif Display - but body
   copy was declared "Segoe UI" and every heading "Inter". Neither is
   downloaded. Inter rendered only because it happens to be installed
   on this machine; on a machine without it the headings would change
   again. So the page was running on four accidental faces.

   Two deliberate ones now: Archivo for everything, DM Serif Display
   for the hero line and the few places that should feel spoken.
================================================================== */
body,
body .band-lede,
body .story-text,
body .origin p,
body .origin-continuation p,
body .archive-card p,
body .sheets > p, body .after > p, body .collection > p,
body figcaption,
body .eyebrow,
body .band-quotes,
body .work-item figcaption{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
body h1, body h2, body h3, body h4,
body .band-head h2, body .origin h2,
body .sheets h3, body .after h3, body .collection h3,
body .archive-card h3, body .work-label{
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
/* the hero keeps the serif - it is the one voice on the page */
body .studio-opening h1,
body .studio-copy h1,
body .studio-frank b{
  font-family:'DM Serif Display',Georgia,serif;
}
body{ font-synthesis:none; }

/* ---- one heading scale, and a quieter one ------------------------
   Rendered before this: 64px, 65px, 54px, 49px for headings doing the
   same job. Now every band title is the same size and smaller, so no
   single one shouts over the opening.
------------------------------------------------------------------ */
body .band-head h2,
body .origin h2,
body #the-work .band-head h2,
body #how-its-made .band-head h2,
body .origin-introduction h2,
body .close-band h2{
  font-size:clamp(31px,3.1vw,46px) !important;
  line-height:1.1 !important;
  font-weight:700 !important;
  letter-spacing:-.015em;
}
body .sheets h3, body .after h3, body .collection h3{
  font-size:clamp(20px,1.7vw,25px) !important;
  font-weight:700;
  letter-spacing:-.005em;
}

/* ---- item 23: the line the whole section rests on -----------------
   "Deciding to learn glassblowing myself" is the thesis of the page
   and it was set as ordinary body copy at 26px with a thin rule.
   Igal: "does not announce itself." It speaks now - the serif, real
   air around it, the gold kept but made structural.
------------------------------------------------------------------ */
body .origin-pull{
  font-size:clamp(21px,2vw,30px) !important;
  line-height:1.42 !important;
  font-weight:400;
  color:#f6ead1 !important;
  margin:clamp(2.4rem,4.5vw,3.8rem) 0 !important;
  padding:0 0 0 clamp(18px,1.8vw,30px) !important;
  border-left:3px solid #d9a441 !important;
  max-width:none !important;
}

/* ---- item 24: and the one that follows it ------------------------ */
body .origin-sub,
body h3.origin-sub{
  font-size:clamp(27px,2.6vw,38px) !important;
  font-weight:700 !important;
}

/* ---- and nothing left behind ------------------------------------
   Twenty of the piece stories, the timeline date labels, the nav and
   the catalog story each re-declared "Segoe UI" on themselves, so
   setting the family on body alone never reached them. Everything
   inherits now; the serif rules above out-rank this one and keep it.
------------------------------------------------------------------ */
body{ font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
/* everything inside the page content inherits; the hero keeps its own
   rules untouched, because that opening is already signed off. */
body .wrap, body .wrap *,
body .site-nav, body .site-nav *,
body footer, body footer *{ font-family:inherit; }

/* weights the page asks for but never downloads: 650 and 800 both
   resolve to a synthesised face. Archivo ships 400/600/700 here. */
body .work-label,
body .archive-card h3,
body .sheets h3, body .after h3, body .collection h3,
body .frank-wall h3,
body h3{ font-weight:700; }

/* ---- the Hat poster's frame, without :has() ----------------------
   The ratio that makes that poster fill its frame was keyed on
   :has(), so on a browser without it the frame falls back to 16/9
   and crops the top and bottom off the sculpture.
------------------------------------------------------------------ */
body .origin-film .video-embed{ aspect-ratio:960/768; }

/* ==================================================================
   THE SEAMS BETWEEN SECTIONS — items 3, 12, 19, 25
   Igal: "you cannot tell the subject has changed"; "three different
   background colours run in sequence ... the sequence is muddled";
   "no transition into this section either."

   Measured: the bands alternated between rgb(4,16,47) and
   rgb(8,21,53) - a luminance step of 0.0024, which is nothing. Worse,
   the colour came from .band:nth-of-type(even), so it tracked a
   section's POSITION rather than its subject; the band-white /
   band-soft / band-paper classes were doing nothing at all.

   Now each band is named and the step between neighbours is real,
   with a soft fall of light at the top of each so the change reads as
   a transition rather than a join.
================================================================== */
body #the-work      { background:#030b20 !important; }  /* deepest, so the glass carries it */
body #frank         { background:#0d1b3c !important; }  /* lifts - a new subject */
body #why-glass     { background:#040e26 !important; }
body #work-for-frank{ background:#0d1b3c !important; }
body #how-its-made  { background:#040e26 !important; }
body #contact       { background:#0d1b3c !important; }

body #the-work, body #frank, body #why-glass,
body #work-for-frank, body #how-its-made, body #contact{
  position:relative;
}
body #frank::before, body #why-glass::before,
body #work-for-frank::before, body #how-its-made::before,
body #contact::before{
  content:''; position:absolute; left:0; right:0; top:0; height:170px;
  pointer-events:none; z-index:0;
  background:linear-gradient(to bottom, rgba(217,164,65,.055), rgba(217,164,65,0) 78%);
}
body #frank > *, body #why-glass > *, body #work-for-frank > *,
body #how-its-made > *, body #contact > *{ position:relative; z-index:1; }

/* ==================================================================
   ITEM 26 — keep the piece in view while its story is open
   Igal: "Opening a story hides the piece ... a small thumbnail of the
   picture sits above the text at the top left, so you can still see
   what you are reading about."

   Measured: the panel covered the plate from 32px down, so of a 290px
   photograph a 32px sliver was left. The picture now steps back into
   the top-left corner and the story takes the room below it.
================================================================== */
body #work-for-frank .sliding-work .work-plate > img{
  transition:height .42s cubic-bezier(.22,.61,.36,1),
             width  .42s cubic-bezier(.22,.61,.36,1),
             object-position .42s ease;
}
body #work-for-frank .sliding-work.story-open .work-plate > img{
  position:absolute !important; top:10px !important; left:10px !important;
  height:108px !important;
  min-height:0 !important;
  width:44% !important;
  max-width:44% !important;
  object-fit:contain !important;
  object-position:left top !important;
  border-radius:4px;
  z-index:3;
}
body #work-for-frank .sliding-work.story-open .work-story{
  max-height:calc(100% - 120px) !important;
}
@media (max-width:760px){
  body #work-for-frank .sliding-work.story-open .work-plate > img{ height:84px !important; width:50% !important; }
  body #work-for-frank .sliding-work.story-open .work-story{ max-height:calc(100% - 94px) !important; }
}
@media (prefers-reduced-motion:reduce){
  body #work-for-frank .sliding-work .work-plate > img{ transition:none; }
}

/* ==================================================================
   ITEM 27 — the two-line titles knocking the rows out of line
   Igal: "'Frank Stella on the Roof' has a two-line title, which
   throws the images below it out of line. The captions are centred,
   which is what makes the horizontal spacing uneven."

   Measured: the grid was align-items:start, so a card whose title
   wrapped to a third line (99px against its neighbours' 75px) ended
   deeper than the rest of its row. Stretching the row and letting the
   caption take up the slack levels every card at any width, rather
   than guessing a height that only holds at one.
================================================================== */
body #frank-wall{ align-items:stretch !important; }
body #frank-wall .archive-card{
  height:auto !important;
  display:flex; flex-direction:column;
}
body #frank-wall .archive-card .work-plate{ flex:0 0 auto; }
body #frank-wall .work-label{
  flex:1 1 auto;
  align-items:start;
}

/* ---- item 18: the tribute ----------------------------------------
   Igal: "'Frank Stella' set bold, in the gold. This part is a
   tribute." It opens the block that gives his dates and his honours,
   so it should read as a name, not as the first words of a sentence.
------------------------------------------------------------------ */
body .frank-note .fn-name{
  font-weight:700;
  color:#e9b95c;
  letter-spacing:.005em;
}

/* ==================================================================
   A LONE PICTURE SHOULD NOT SIT IN THE LEFT-HAND COLUMN
   Igal, on "Sculpture study": "is left by itself on the left. I would
   put it in the middle. And maybe even slightly bigger ... this way
   it doesn't look like we have an empty space on the right."

   The same thing happened in The Glass once "Frosted glass on wood"
   was moved out of the opening row. Both get the same treatment: the
   full row, centred, and a size that earns it.
================================================================== */
body #the-work .work-grid > .solo-feature{
  grid-column:1 / -1;
  justify-self:center;
  --glass-height:470px;
}
body #frank-wall > .archive-card:last-child{
  grid-column:1 / -1;
  justify-self:center;
  width:min(100%,560px);
}
body #frank-wall > .archive-card:last-child .work-plate{ height:430px !important; }

@media (max-width:1100px){
  body #the-work .work-grid > .solo-feature{ --glass-height:380px; }
  body #frank-wall > .archive-card:last-child .work-plate{ height:360px !important; }
}
@media (max-width:760px){
  body #the-work .work-grid > .solo-feature{ --glass-height:280px; }
  body #frank-wall > .archive-card:last-child{ width:100%; }
  body #frank-wall > .archive-card:last-child .work-plate{ height:auto !important; }
}

/* ---- "Why an engineer ended up blowing glass" in two lines -------
   Igal: "Why is it three rows? It should be in two rows only. The
   word glass should not go below." It was capped at 14ch, which put
   "glass" on a line of its own.
------------------------------------------------------------------ */
body .origin-introduction h2{
  max-width:21ch !important;
  text-wrap:balance;
}

/* ---- the section titles in the archive should match each other ---
   Igal: "Printed design catalog ... other titles you had them in a
   different colour and a different font. This one looks kind of
   disconnected."
------------------------------------------------------------------ */
body .sheets h3, body .after h3, body .collection h3,
body #work-for-frank .band-head h2{
  color:#f4f2ec;
}
body .sheets h3, body .after h3, body .collection h3{
  margin-bottom:.55em;
}

/* the printed sheets are white now, so they need no dark plate behind
   them and a hairline keeps them from bleeding into the band */
body .sheet-row img{
  background:#fff !important;
  border:1px solid rgba(217,164,65,.22);
  border-radius:4px;
}

/* ---- the opening scene takes the full row, like the other three ---
   Igal: "the first image on the right, Frosted glass on wood ... the
   height of that picture is different than the glass sphere in
   driftwood."

   Moving that picture was only half of it: the driftwood scene was
   pinned to two of the three columns, so whatever followed simply
   took the empty third column and mismatched it in turn. The other
   three scenes already run 1/-1; this one now does too.
------------------------------------------------------------------ */
body #the-work .work-grid > .scene-work{ grid-column:1 / -1 !important; }

/* the plate height is fixed at 390 by the gallery sheet, so a bigger
   --glass-height alone could not lift the solo picture */
body #the-work .work-grid > .solo-feature .work-plate{ height:470px !important; }
@media (max-width:1100px){
  body #the-work .work-grid > .solo-feature .work-plate{ height:380px !important; }
}
@media (max-width:760px){
  body #the-work .work-grid > .solo-feature .work-plate{ height:280px !important; }
}

/* the statement reads in about three lines, not two long ones and not
   the six narrow ones it was cut to before */
body .origin-pull{ max-width:42ch !important; }

/* ---- the 2017 talk still -----------------------------------------
   Igal: "the bleeding of the hat video and the image still exists."

   Both were the same fault, in the pictures rather than the CSS. The
   Hat poster carried a 4px white matte on three sides and 6px on the
   fourth, so with object-fit:cover on an almost identical ratio the
   matte was never cropped away - it read as a white edge with square
   corners inside a rounded frame. The talk still was a screen capture
   with black letterbox bars top and bottom and white pillars either
   side. Both are cropped to their real picture now, and each frame is
   set to the ratio of the picture it holds, so nothing is letterboxed
   and nothing is cut.
------------------------------------------------------------------ */
body .t-media .video-embed{ aspect-ratio:558/360; }

/* ---- the date marker follows the text, not the film ---------------
   Igal: "you have the point on the line, then you have the text on
   one side ... the next time it's always on the left side ... it
   should be whatever the text is, not what the video. One left, one
   right, one left, one right. Always with the text side."

   The label was pinned to the left of the dot on every item, so on
   the items whose text sits on the right it drifted away from the
   words it belongs to and hung over the film instead.
------------------------------------------------------------------ */
@media (min-width:761px){
  body .t-item.t-flip .t-date .event-label{
    right:auto;
    left:calc(50% + 12px);
    text-align:left;
  }
}

/* Keep an intrinsic scene plate when its image becomes a story thumbnail. */
body #the-work .scene-work .work-plate{
  aspect-ratio:var(--glass-ratio,1.333333);
}

/* Phone readers use normal flow: a thumbnail followed by the whole story.
   Absolute thumbnails previously collapsed auto-height scene plates, and
   nested quartet/pair cards missed the full-row selector. Closed artwork
   keeps the gallery's existing ratio-based sizing. */
@media (max-width:760px){
  body #the-work .glass-quartet > .story-open,
  body #the-work .sphere-pair > .story-open{
    grid-column:1 / -1;
  }
  body #work-for-frank .sliding-work.story-open .work-plate{
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    height:auto !important;
    min-height:0;
    aspect-ratio:auto !important;
    overflow:visible;
  }
  body #work-for-frank .sliding-work.story-open .work-plate > img{
    flex-shrink:0;
    position:static !important;
    align-self:flex-start;
    height:84px !important;
    width:auto !important;
    max-width:44% !important;
    margin:10px;
    transition:none;
  }
  body #work-for-frank .sliding-work.story-open .murrine-crop{
    flex-shrink:0;
    align-self:flex-start;
    height:84px !important;
    width:84px;
    margin:10px;
  }
  body #work-for-frank .sliding-work.story-open .work-story{
    position:static;
    box-sizing:border-box;
    width:100%;
    max-height:none !important;
    overflow:visible !important;
    transform:none;
    transition:none;
    -webkit-mask-image:none;
    mask-image:none;
  }
  .option-a .studio-opening .site-nav > div{
    gap:0 12px;
  }
  .option-a .studio-opening .site-nav a,
  .option-a .studio-actions > a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px !important;
  }
  .option-a .studio-opening .site-nav > div a{
    min-width:44px;
    font-size:12px;
  }
}

@media (min-width:761px) and (max-width:1100px){
  .option-a .studio-opening .site-nav{height:auto;gap:8px 20px;}
  .option-a .studio-opening .site-nav a{
    display:inline-flex;align-items:center;min-height:44px;
  }
}

/* A portrait tablet uses the portrait photograph, so its text must also
   follow a portrait layout instead of desktop percentage positioning. */
@media (min-width:761px) and (max-width:1100px) and (max-aspect-ratio:1/1){
  .option-a .studio-opening{
    height:auto;
    min-height:100svh;
    padding-bottom:60vw;
    background-size:100% auto;
    background-position:center bottom;
  }
  .option-a .studio-opening::before{display:none;}
  .option-a .studio-opening::after{
    content:'';position:absolute;inset:0 0 auto;height:52%;
    background:linear-gradient(#061028 45%,rgba(6,16,40,.9) 75%,transparent);
    pointer-events:none;
  }
  .option-a .studio-opening .site-nav{
    position:relative;z-index:2;height:auto;flex-wrap:wrap;
  }
  .option-a .studio-opening .site-nav > div{flex-wrap:wrap;gap:4px 20px;}
  .option-a .studio-opening .site-nav a{min-height:44px;display:inline-flex;align-items:center;}
  .option-a .studio-hero{
    position:relative;z-index:2;height:auto !important;
    padding:24px 5% 0;
  }
  .option-a .artist-line,
  .option-a .studio-copy,
  .option-a .studio-actions,
  .option-a .studio-frank{
    position:static !important;transform:none !important;
    width:auto !important;max-width:100%;
  }
  .option-a .artist-line{writing-mode:horizontal-tb !important;margin:0 0 12px;}
  .option-a .studio-copy h1{font-size:clamp(30px,4vw,40px) !important;}
  .option-a .studio-actions{margin:20px 0 0 !important;}
  .option-a .studio-frank{margin:20px 0 0 !important;padding-top:12px;}
}

footer a{display:inline-flex;align-items:center;min-height:44px;}
@media(max-width:760px){
  body #the-work .work-grid > .sliding-work.story-open:not(.wide):not(.solo-feature),
  body #the-work .glass-quartet > .story-open,
  body #the-work .sphere-pair > .story-open{grid-column:auto !important;}
  body #the-work .glass-story .work-label{font-size:14px;line-height:20px;}
  body #the-work .glass-story{position:relative;}
  body #the-work .glass-story .work-label{position:static;display:block;padding-inline:0;text-align:center;}
  body #the-work .glass-story .work-label > span:first-child{display:block;width:100%;max-width:none;}
  body #the-work .glass-story .work-action{position:absolute;top:8px;right:8px;z-index:5;background:rgba(6,16,40,.85);}
  body #the-work .band-lede,
  body #the-work .work-story p{font-size:16px;line-height:24px;}
  body #the-work .glass-story:not(.wide):not(.solo-feature) .work-story p{font-size:14px;line-height:20px;}
  body #the-work .story-open .work-story{max-height:100% !important;overflow-y:auto !important;padding:12px;box-sizing:border-box;}
}
/* Owner review: retain desktop typography and put the invitation below the glass. */
@media(max-width:760px){
  .option-a .studio-opening{display:flex;flex-direction:column;}
  .option-a .studio-opening{background-position:center calc(100% + 82px);}
  .option-a .studio-opening::after{height:36%;background:linear-gradient(180deg,rgba(6,16,40,.94),rgba(6,16,40,.72) 55%,transparent);}
  .option-a .studio-opening .site-nav{flex-shrink:0;}
  .option-a .studio-opening .site-nav{flex-direction:row;align-items:flex-start;justify-content:flex-start;padding:12px 16px !important;gap:8px !important;}
  .option-a .studio-opening .brand{font-size:16px;white-space:normal;max-width:100px;gap:6px;line-height:1.15;}
  .option-a .studio-opening .brand img{width:24px;height:24px;flex-shrink:0;}
  .option-a .studio-opening .site-nav > div{display:grid;grid-template-columns:.8fr 1.3fr .8fr 1.1fr;gap:0 6px;justify-content:start;align-items:start;flex:1;min-width:0;}
  .option-a .studio-opening .site-nav > div a{display:block;box-sizing:border-box;height:44px;min-height:44px !important;min-width:0;padding:6px 3px;font-size:11px;line-height:1.35;white-space:nowrap;text-align:center;border:1px solid rgba(232,239,245,.3);border-radius:12px;background:rgba(28,48,70,.25);}
  .option-a .studio-opening .site-nav > div a[href="#contact"]{display:none;}
  .option-a .studio-opening .site-nav > div a[href="#frank"]{display:block;text-align:center;}
  .mobile-menu-break{display:block;}
  .option-a .studio-hero{flex:1;padding-top:30px !important;}
  .option-a .artist-line{margin-bottom:12px !important;}
  .option-a .studio-actions{margin-top:20px !important;}
  .option-a .studio-copy h1{font-family:'DM Serif Display',Georgia,serif !important;font-weight:700 !important;font-size:clamp(20px,6vw,26px) !important;max-width:none;letter-spacing:-.5px;}
  .option-a .studio-copy h1 br.hb{display:block;}
  .option-a .studio-copy h1 i br.hb{display:none;}
  .option-a .studio-copy h1 i{font-family:inherit !important;font-weight:inherit !important;color:#eac184 !important;}
  .option-a .studio-frank{position:static !important;top:auto !important;bottom:auto !important;left:auto !important;right:auto !important;margin:30px 0 0 !important;}
  .option-a .studio-frank b{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.3;padding:0 14px;border:1px solid rgba(232,239,245,.3);border-radius:24px;background:rgba(28,48,70,.25);}
  .option-a .studio-frank b::after{content:none;}
  .option-a .studio-actions > a,
  .option-a .studio-frank b{position:relative;isolation:isolate;border-color:transparent;background:transparent;box-shadow:none;}
  .option-a .studio-actions > a::before,
  .option-a .studio-frank b::before{content:'';position:absolute;inset:5px 0;border:1px solid rgba(232,239,245,.3);border-radius:24px;background:rgba(28,48,70,.25);z-index:-1;pointer-events:none;}
}
body #how-its-made .film figcaption{text-align:center;}
body .after > h3,body .collection > h3,body .origin-sub{color:#f4f2ec !important;}
.mobile-menu-break::after{content:' ';white-space:pre;}
@media(max-width:760px){
 body #work-for-frank .archive-card .work-label,
 body #work-for-frank .archive-card h3,
 body #work-for-frank .archive-card > div > p,
 body figcaption{font-size:14px !important;line-height:20px !important;}
 body #contact.close-band{padding-block:28px;}
 body #contact h2{margin:0 0 8px;}
 body #contact .close-mail{margin-top:0;}
 body footer{padding:12px 20px;gap:4px;}
 body footer p{margin:4px 0;line-height:20px;}
}
@media(min-width:761px) and (max-width:1000px) and (max-height:500px){
 body #work-for-frank .archive-card .work-label,
 body #work-for-frank .archive-card h3,
 body #work-for-frank .archive-card > div > p,
 body figcaption{font-size:14px !important;line-height:20px !important;}
 body .sliding-work.story-open .work-story{max-height:calc(100svh - 100px) !important;overflow-y:auto !important;}
 body .frank-note,body .frank-note p,body .frank-note li,body .frank-note b,body .frank-note span{font-size:14px !important;line-height:21px !important;font-style:italic;font-synthesis:style;}
 body .frank-honours{list-style:none;padding:0;}
 body .frank-honours li{list-style:none;margin-bottom:8px;}
 body .frank-honours li::before{content:none;}
 body #contact.close-band{padding-block:28px;}
 body footer{padding:12px 20px;gap:4px;}
 body footer p{margin:4px 0;}
}

/* Modestly larger catalog sheets, with an opt-in detail lens. */
body .sheet-row{grid-template-columns:repeat(4,minmax(0,240px));max-width:1014px;}
body .sheet-row img{width:100%;height:auto !important;max-height:none;}
.catalog-sheet{position:relative;min-width:0;}
#design-catalog{position:relative;padding-top:54px;}
.catalog-zoom{position:absolute;right:6px;top:6px;z-index:3;width:44px;height:44px;border:1px solid #b69250;border-radius:50%;background:#0d1b3c;color:#f4f2ec;font:30px/1 Arial,sans-serif;cursor:pointer;}
.catalog-zoom[aria-pressed=true]{background:#eac184;color:#061028;}
.catalog-lens{display:none;position:absolute;z-index:2;width:132px;height:132px;border:2px solid #b69250;border-radius:50%;background-color:white;background-repeat:no-repeat;pointer-events:none;box-shadow:0 3px 12px #0005;}
.zoom-active .catalog-lens{display:block;}
#design-catalog.zoom-active{touch-action:none;}
#design-catalog.zoom-active .catalog-sheet{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.catalog-story{position:relative;max-width:1014px;}
body .catalog-story summary{display:flex;align-items:center;justify-content:center;gap:20px;min-height:56px;text-align:center;list-style:none;cursor:pointer;}
.catalog-story summary::-webkit-details-marker{display:none;}
.catalog-story[open] .work-action:before{transform:translate(-50%,-50%) rotate(45deg);}
.catalog-story[open] .work-action:after{transform:translate(-50%,-50%) rotate(-45deg);}
.catalog-story-panel{position:absolute;bottom:100%;left:0;right:0;z-index:4;max-height: min(360px,60vh);overflow-y:auto;box-sizing:border-box;padding:22px;background:#14203f;border-top:1px solid #b69250;box-shadow:0 -4px 15px #0003;}
.catalog-story[open] .catalog-story-panel{animation:catalog-story-rise .25s ease-out;}
@keyframes catalog-story-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.catalog-story[open] .catalog-story-panel{animation:none;}}
@media(max-width:760px){body .sheet-row{grid-template-columns:repeat(2,minmax(0,1fr));width:calc(100% + 16px);max-width:none;margin-left:-8px;margin-right:-8px;gap:10px;}.catalog-lens{width:100px;height:100px;}}

/* Keep the reading affordance visible wherever a story has internal scrolling. */
@media(max-width:760px){
 body #the-work .glass-story .work-plate{height:auto !important;aspect-ratio:var(--glass-ratio);min-height:0 !important;}
 body #the-work .glass-story .work-plate > img{height:100% !important;width:100%;}
 body #the-work .glass-story .work-label{width:100%;}
 body #the-work .glass-story:has(#glass-title-12) .work-plate{aspect-ratio:.955208;overflow:hidden;}
 body #the-work .glass-story:has(#glass-title-12) .work-plate > img{position:absolute;top:-7.46%;left:0;width:100%;height:auto !important;max-height:none;}
 body #the-work .glass-story:has(#glass-title-14){grid-column:1 / -1 !important;}
 body #the-work .glass-quartet .glass-story .work-plate{aspect-ratio:.912125;}
 body #the-work .glass-quartet .murrine-crop{position:absolute;inset:0;height:100%;overflow:hidden;}
 body #the-work .glass-quartet .murrine-crop > img{position:absolute;width:125%;max-width:none;height:auto !important;left:-12.5%;top:-40%;transform:none;}
}
body .sliding-work.story-open .work-story,
body .catalog-story-panel{scrollbar-width:thin;scrollbar-color:#eac184 #25334d;scrollbar-gutter:stable;}
body .work-story::-webkit-scrollbar,
body .catalog-story-panel::-webkit-scrollbar{width:7px;}
body .work-story::-webkit-scrollbar-thumb,
body .catalog-story-panel::-webkit-scrollbar-thumb{background:#eac184;border-radius:5px;}
body .work-story::-webkit-scrollbar-track,
body .catalog-story-panel::-webkit-scrollbar-track{background:#25334d;}
/* Phone opening: let the content determine its height, with clear space for art. */
@media(max-width:760px){
 .option-a .studio-opening{height:auto !important;min-height:100svh;padding-bottom:100vw;box-sizing:border-box;background-size:100% auto;background-position:center bottom;}
 .option-a .studio-opening .site-nav{display:flex;flex-direction:column;align-items:stretch;gap:14px !important;padding:16px 20px !important;}
 .option-a .studio-opening .brand{max-width:none;font-size:28px !important;line-height:1.1;white-space:nowrap;gap:10px;align-items:center;}
 .option-a .studio-opening .brand img{width:48px;height:48px;}
 .option-a .studio-opening .site-nav > div{flex:none;width:100%;grid-template-columns:.9fr 1.3fr .9fr 1.1fr;gap:7px;}
 .option-a .studio-opening .site-nav > div a{height:auto;min-height:52px !important;padding:8px 4px;font-size:13px !important;line-height:17px !important;}
 .option-a .studio-opening .mobile-menu-break{display:block;height:0;}
 .option-a .studio-opening .mobile-menu-break::after{content:none;}
 .option-a .studio-hero{flex:none;padding:14px 20px 0 !important;gap:16px;}
 .option-a .studio-copy h1{font-size:clamp(19px,6vw,42px) !important;line-height:1.15 !important;letter-spacing:-.5px;white-space:nowrap;}
 .option-a .studio-copy h1 > br.hb{display:block;}
 .option-a .studio-copy h1 i{display:inline;white-space:nowrap;}
 .option-a .studio-copy h1 i br.hb{display:none;}
 .option-a .artist-line{font-size:12px !important;line-height:18px !important;}
 .option-a .studio-actions{margin-top:8px !important;}
 .option-a .studio-actions > a{font-size:14px !important;}
 .option-a .studio-frank{margin-top:18px !important;}
 .option-a .studio-frank > span{font-size:14px !important;line-height:20px;}
 .option-a .studio-frank strong{font-size:24px !important;}
 .option-a .studio-frank b{font-size:14px !important;}
}
@media(max-width:760px){
 body .frank-intro .frank-note{padding:16px 18px;font-size:14px;line-height:21px;font-style:italic;font-synthesis:style;gap:12px;}
 body .frank-intro .frank-note p,
 body .frank-intro .frank-note li,
 body .frank-intro .frank-note b,
 body .frank-intro .frank-note span{font-size:14px !important;line-height:21px !important;font-style:italic !important;}
 body .frank-intro .frank-note p{margin:0 0 10px;}
 body .frank-intro .frank-honours{list-style:none;margin:0;padding:0;}
 body .frank-intro .frank-honours li{list-style:none;padding:0;margin:0 0 8px;}
 body .frank-intro .frank-honours li::before{content:none;}
 body .frank-intro .frank-honours li:last-child{margin-bottom:0;}
 body .frank-intro .frank-note-quote{margin:10px 0 0;text-align:right;}
 body figcaption,
 body .films .film > figcaption,
 body #how-its-made .films .film > figcaption{margin-top:0 !important;padding-top:5px !important;padding-bottom:5px !important;}
 body #the-work .glass-story .work-label{padding-top:5px;padding-bottom:5px;}
}
@media(max-width:760px){
 body #work-for-frank .frank-wall{overflow-anchor:none;}
 body #the-work .glass-story .work-label{padding-top:6px;padding-bottom:6px;}
 body #the-work .glass-story .work-plate > img{object-position:center bottom;}
 body #the-work .glass-story .work-action{width:24px;height:24px;}
 body .band-quotes p{font-size:19px !important;line-height:1.4 !important;}
 body .frank-note-quote{font-size:16px !important;line-height:24px !important;font-style:italic;text-align:right;}
 body .origin-pull{font-size:19px !important;line-height:27px !important;}
 body .origin-sub{font-size:22px !important;line-height:28px !important;text-wrap:balance;}
}
.frank-references{margin:16px 0 24px;padding:16px 20px;border-left:2px solid #e7bc79;max-width:760px}
.frank-references h3{margin:0 0 10px;color:#fff;font-size:20px}
.frank-references ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.frank-references li{font-size:15px;line-height:1.45}
.frank-references a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.frank-references li>span{display:block;font-size:13px;opacity:.8;margin-top:2px}

/* Match the opening action buttons, including Read the story. */
.option-a .studio-frank b{font-family:'Segoe UI',Arial,sans-serif!important}

/* Phone archive stories occupy the existing artwork plate, never the page.
   The row's measured art height is identical in the open and closed state. */
.story-scroll-track{display:none}
@media(max-width:760px){
 body #work-for-frank .sliding-work .work-plate,
 body #work-for-frank .sliding-work.story-open .work-plate{
  position:relative;display:flex!important;flex-direction:row;align-items:flex-end;
  height:max(180px,var(--row-art-height,270px))!important;
  min-height:0;aspect-ratio:auto!important;overflow:hidden;
 }
 body #work-for-frank .sliding-work.story-open .work-plate > img{
  position:static!important;top:auto!important;left:auto!important;
  height:var(--row-art-height,270px)!important;width:auto!important;max-width:100%!important;
  margin:0;object-position:center!important;z-index:auto;transition:none;
 }
 body #work-for-frank .sliding-work .work-story,
 body #work-for-frank .sliding-work.story-open .work-story{
  position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;max-height:100%!important;
  padding:16px 22px 18px 16px;overflow-y:auto!important;overflow-x:hidden!important;
  overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  -webkit-mask-image:none;mask-image:none;transition:none;
 }
 body #work-for-frank .sliding-work:not(.story-open) .work-story{visibility:hidden;pointer-events:none}
 body #work-for-frank .sliding-work.story-open .work-story{transform:none;visibility:visible;pointer-events:auto}
 body #work-for-frank .sliding-work.story-open .story-scroll-track:not([hidden]){
  display:block;position:absolute;z-index:4;right:5px;top:12px;bottom:12px;width:3px;
  border-radius:3px;background:rgba(234,193,132,.18);pointer-events:none;
 }
 .story-scroll-track > span{display:block;width:3px;border-radius:3px;background:#eac184;will-change:transform}
}