*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#eef8fc;font-family:"Segoe UI",Arial,Helvetica,sans-serif}
html{overflow-y:scroll}
body{display:flex;justify-content:center;align-items:flex-start;overflow-x:hidden}

.stage{
  position:relative;
  container-type:inline-size;
  width:min(100vw, 1536px, calc(100vh * 1536 / 1024));
  aspect-ratio:1536/1024;
  border-radius:42px;
  overflow:hidden;
  background:url("../assets/stage-base.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

/* ---------- Photo slideshow (sits under the foreground matte's photo window) ---------- */
.hero-slideshow-underlay{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}
.hero-slideshow-underlay .slide{
  position:absolute;
  left:0;
  top:0;
  width:53.4%;
  height:79.1%;
  opacity:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.025);
  transform-origin:center center;
}
.hero-slideshow-underlay .slide.active{opacity:1}
.hero-slideshow-underlay .slide.incoming{opacity:1;transition:opacity 2.6s ease-in-out}
.hero-slideshow-underlay .slide.original{background:transparent;opacity:0 !important;pointer-events:none}

/* ---------- Foreground artwork (shadow + card frames + photo cutout) ---------- */
.approved-foreground-matte{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.approved-foreground-matte img{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Shared overlay layer ---------- */
.logo-replacement,
.editable-top-nav,
.editable-book-link,
.hotspot,
.edit-copy,
.learn-link,
.learn-more{
  z-index:10;
}
.hotspot{
  position:absolute;
  display:block;
  border-radius:18px;
  outline:none;
}
.hero-cta{
  left:54.95%; top:61.04%; width:20.44%; height:6.35%;
  border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  gap:0.6vw; /* plain fallback: works everywhere, even if min()/clamp() below don't parse */
  gap:max(2px,min(0.6vw,0.9vh,9px));
  background:#075DB8;
  color:#fff;
  text-decoration:none;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-weight:700;
  letter-spacing:.02em;
  /* Two-tier: plain vw first (always valid, scales with width -- the common
     case), then max(min()) as an enhancement that also accounts for the
     height-constrained case (.stage's own min(100vw,1536px,150vh) sizing).
     Deliberately avoids nesting min() inside clamp() -- some WebKit builds
     don't reliably resolve that specific nesting. */
  font-size:1.0417vw;
  font-size:max(3px,min(1.0417vw,1.5625vh,16px));
  white-space:nowrap;
}
.hero-cta:hover{background:#064a94}
.hero-cta-arrow{font-weight:700}

.logo-replacement{
  position:absolute;
  left:0;
  top:0;
  width:27.8%;
  height:12.6%;
  border-radius:31px 31px 31px 0;
  overflow:hidden;
  background:#fff;
}
.logo-replacement img{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
  display:block;
  background:#fff;
}

/* ---------- Top navigation ---------- */
.editable-top-nav{
  position:absolute;
  left:44.65%;
  top:4.18%;
  width:37.7%;
  height:5.45%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1vw;
  gap:max(1px,min(1vw,1.5vh,15px));
  white-space:nowrap;
}
.editable-top-nav a{
  position:relative;
  display:inline-block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#071b3f;
  text-decoration:none;
  font-size:1.0417vw;
  font-size:max(3px,min(1.0417vw,1.5625vh,16px));
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  padding:0 0 7px;
}
.editable-top-nav a.active::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:min(.195313vw,3px);
  border-radius:2px;
  background:#0455aa;
}
.editable-top-nav a:hover::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:min(.195313vw,3px);
  border-radius:2px;
  background:#68b7e5;
}

.editable-book-link{
  position:absolute;
  left:86.15%;
  top:3.77%;
  width:11.55%;
  height:5.45%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
  font-size:1.0417vw;
  font-size:max(3px,min(1.0417vw,1.5625vh,16px));
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:#075DB8;
  border-radius:999px;
  padding:0 4px;
  box-sizing:border-box;
}
.editable-book-link:hover{background:#064a94}

/* ---------- Tile text (card artwork itself lives in the background images) ---------- */
.edit-copy{
  position:absolute;
  font-family:"Segoe UI",Arial,sans-serif;
  color:#0b2853;
  background:rgb(244,247,251);
  pointer-events:none;
  padding:0;
}
.edit-copy h3{
  margin:0;
  font-size:1.30vw;
  font-size:max(15px,min(1.30vw,1.95vh,20px));
  line-height:1.08;
  font-weight:700;
  letter-spacing:-0.01em;
}
.edit-copy p{
  margin:8px 0 0;
  font-size:0.92vw;
  font-size:max(10px,min(0.92vw,1.38vh,14px));
  line-height:1.42;
  font-weight:400;
}
.copy-dive   {left:12.00%; top:79.30%; width:12.8%; height:10.6%; background:transparent;}
.copy-learn  {left:36.20%; top:79.30%; width:12.8%; height:10.6%; background:transparent;}
.copy-journal{left:59.50%; top:79.05%; width:13.6%; height:12.1%;}
.copy-story  {left:82.45%; top:78.80%; width:14.2%; height:12.7%;}

.learn-link{
  position:absolute;
  height:2.4%;
  width:7.8%;
}
.learn1{left:12.00%; top:92.6%;}
.learn2{left:36.20%; top:92.6%;}
.learn3{left:59.50%; top:92.6%;}
.learn4{left:82.45%; top:91.15%;}

.learn-more{
  position:absolute;
  top:92.188%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:0.72vw;
  gap:max(2px,min(0.72vw,1.08vh,11px));
  font-family:Arial,Helvetica,sans-serif;
  font-size:1.041667vw;
  font-size:max(3px,min(1.041667vw,1.5625vh,16px));
  line-height:1;
  font-weight:700;
  color:#094cb9;
  pointer-events:none;
  white-space:nowrap;
}
.learn-more .lm-arrow{font-size:1.22em;font-weight:700;line-height:.78;position:relative;top:-0.01em}
.lm-dive{left:12.00%;color:#061B3E;}
.lm-learn{left:36.20%;color:#0D5871;}
.lm-journal{left:59.50%;color:#0552B5;}
.lm-story{left:82.45%;color:#C85F55;}

.story-html-icon{
  position:absolute;
  z-index:17;
  left:75.59%;
  top:80.15%;
  width:5.55%;
  aspect-ratio:1/1;
  height:auto;
  overflow:visible;
  pointer-events:none;
}
.story-html-icon svg{display:block;width:100%;height:100%;overflow:visible}

/* =========================================================
   Mobile layout (phones) — simplified, stacked, plain HTML/CSS
   ========================================================= */
.m-shell{display:none}

@media (max-width:700px), (max-height:500px){
  body{display:block}
  .stage{display:none}
  .sp-page-backdrop{display:none}
  .m-shell{display:block; background:#eef8fc}
}
html.force-desktop body{display:flex}

.m-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background:#fff;
  box-shadow:0 2px 10px rgba(11,40,83,.08);
}
.m-logo{height:44px; width:auto; display:block}

.m-menu-btn{
  width:44px; height:44px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  background:none; border:none; padding:0; cursor:pointer;
}
.m-menu-btn span{display:block; width:24px; height:2.5px; background:#0b2853; border-radius:2px; transition:transform .25s ease, opacity .25s ease}
.m-shell.nav-open .m-menu-btn span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.m-shell.nav-open .m-menu-btn span:nth-child(2){opacity:0}
.m-shell.nav-open .m-menu-btn span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.m-nav{
  position:fixed; top:0; right:0; z-index:110;
  width:min(78vw,320px); height:100%;
  background:#fff;
  display:flex; flex-direction:column; gap:2px;
  padding:80px 22px 24px;
  box-shadow:-8px 0 24px rgba(11,40,83,.15);
  transform:translateX(100%);
  transition:transform .28s ease;
}
.m-shell.nav-open .m-nav{transform:translateX(0)}
.m-nav a{
  display:block; padding:15px 4px;
  color:#0b2853; text-decoration:none; font-weight:700; font-size:19px;
  border-bottom:1px solid #eef1f6;
}
.m-nav a.active{color:#0455aa}
.m-nav-book{
  margin-top:16px; text-align:center;
  background:#075DB8; color:#fff !important; border-radius:999px;
  border-bottom:none !important;
}

.m-nav-backdrop{
  position:fixed; inset:0; z-index:105;
  background:rgba(6,20,45,.42);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.m-shell.nav-open .m-nav-backdrop{opacity:1; pointer-events:auto}

.m-hero{position:relative; height:56vh; min-height:320px; max-height:520px; overflow:hidden}
.m-hero-slideshow{position:absolute; inset:0; overflow:hidden}
.m-hero-slideshow .slide{
  position:absolute; inset:0;
  opacity:0;
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
  transform:scale(1.025);
  transform-origin:center center;
}
.m-hero-slideshow .slide.active{opacity:1}
.m-hero-slideshow .slide.incoming{opacity:1; transition:opacity 2.6s ease-in-out}
.m-hero-slideshow .slide.original{background:#0b2853; opacity:1}
.m-hero-scrim{position:absolute; inset:0; background:linear-gradient(180deg,rgba(4,14,33,.15) 0%,rgba(4,14,33,.1) 45%,rgba(4,14,33,.65) 100%)}
.m-hero-wave{
  position:absolute; left:0; right:0; bottom:-2px;
  width:100%; height:clamp(76px,26.4vw,132px);
  display:block; pointer-events:none; user-select:none;
  overflow:visible;
}
.m-hero-wave-main{fill:#eef8fc}
.m-hero-wave-shadow{fill:rgba(4,20,45,.4)}
.m-hero-boundary-fix{
  position:absolute; left:0; right:0; bottom:-1px;
  height:12px; background:#eef8fc;
  pointer-events:none; user-select:none;
}
.m-hero-content{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 20px clamp(49px,19.5vw,83px);
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
}
.m-hero-content h1{
  margin:0; max-width:85%;
}
.m-tagline-script{
  display:block;
  font-family:"Caveat","Segoe Script",cursive;
  font-weight:700;
  font-size:50px;
  line-height:1.05;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.m-tagline-bold{
  display:block;
  font-family:"Segoe UI","SegoeUI",Arial,sans-serif;
  font-weight:800;
  font-size:27px;
  letter-spacing:.02em;
  line-height:1.2;
  color:#4fc3f7;
  text-transform:uppercase;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.m-hero-cta{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 26px;
  background:#075DB8; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px; border-radius:999px;
}

.m-page-content{padding:28px 20px 8px}
.m-page-content .sp-eyebrow,
.m-page-content .sp-heading,
.m-page-content .sp-lead,
.m-page-content .sp-sub,
.m-page-content .sp-back-home,
.m-page-content .sp-closing-tagline{max-width:none}

.m-cards{padding:22px 16px 8px; display:flex; flex-direction:column; gap:16px}
.m-card{
  background:#fff; border-radius:20px; padding:22px 20px 20px;
  box-shadow:0 6px 20px rgba(11,40,83,.08);
  background-size:cover; background-position:center bottom; background-repeat:no-repeat;
}
.m-card-dive{background-image:url("../assets/m-card-bg-dive.png")}
.m-card-learn{background-image:url("../assets/m-card-bg-learn.png")}
.m-card-journal{background-image:url("../assets/m-card-bg-journal.png")}
.m-card-story{background-image:url("../assets/m-card-bg-story.png")}
.m-card-top{display:flex; align-items:flex-start; gap:14px}
.m-icon{
  flex:none;
  width:56px; height:56px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.m-icon svg{width:30px; height:30px}
.m-icon img{width:100%; height:100%; object-fit:cover; display:block}
.m-card-text{flex:1; min-width:0}
.m-card h3{margin:0 0 6px; color:#0b2853; font-size:19px; font-weight:800; letter-spacing:-.01em}
.m-card p{margin:0; color:#33455f; font-size:14.5px; line-height:1.5}
.m-learn-more{
  display:flex; align-items:center; justify-content:center; gap:6px;
  width:fit-content;
  margin:6px auto 0;
  min-height:44px;
  font-weight:700; font-size:14px; text-decoration:none;
}
.m-learn-more span{font-size:1.2em; line-height:0}

.m-footer{padding:8px 16px 32px; display:flex; flex-direction:column; align-items:center; gap:16px}
.m-footer-book{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:52px; border-radius:999px;
  background:#075DB8; color:#fff; text-decoration:none;
  font-weight:700; font-size:15px;
}
.m-view-full{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; padding:0 10px;
  color:#33455f; text-decoration:underline; text-underline-offset:3px;
  font-size:13.5px; font-weight:600;
}
.m-social{
  display:flex; align-items:center; justify-content:center;
  gap:18px;
}
.m-social a{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  border-radius:999px;
  background:#0b2853;
  color:#fff;
}
.m-social a:hover{background:#075DB8}
.m-social svg{width:52%; height:52%}

/* ---------- "View full site" override: lets a phone visitor opt into the desktop poster layout ----------
   .stage/.sp-stage keep their normal responsive width down to a floor of
   800px; below that (i.e. on a phone) width sticks at 800px and the page
   scrolls horizontally instead of shrinking further, and the block below
   switches every size-sensitive piece of text to plain fixed px values
   matching that 800px layout. Deliberately no vw/vh/clamp/min/max anywhere
   in this narrow-width block -- real testing (Safari AND Chrome on iOS,
   both WebKit under the hood) showed that formula-based sizing kept
   overflowing its box on-device even though it measured correctly here,
   so this trades a little elegance for something that can't be ambiguous:
   the box is a fixed size and the text is a fixed size, always. */
html.force-desktop .stage{display:block !important; flex-shrink:0 !important}
html.force-desktop .sp-page-backdrop{display:block !important; flex-shrink:0 !important}
html.force-desktop .m-shell{display:none !important}
html.force-desktop body{overflow-x:auto}
@media (max-width:800px), (max-height:500px){
  /* Same OR condition the mobile-shell switch itself uses (max-width:700px,
     max-height:500px) -- a phone in landscape has plenty of width (often
     660-930px, comfortably over an 800px max-width test) but very little
     height, so a width-only condition here let landscape fall through to
     the fluid vw/vh formulas that don't render reliably on-device, while
     portrait (caught by max-width) was fine. This catches both.
     flex-shrink:0 is load-bearing here: .stage/.sp-page-backdrop are flex
     items in body{display:flex}, and flexbox shrinks items below their set
     width to fit the container by default -- that silently overrode every
     earlier width fix in this block, even an inline !important one. */
  html.force-desktop .stage,
  html.force-desktop .sp-stage{width:800px !important; flex-shrink:0 !important}
  html.force-desktop body{justify-content:flex-start !important}
  html.force-desktop .editable-top-nav a{font-size:8px !important}
  html.force-desktop .editable-top-nav{gap:8px !important}
  html.force-desktop .hero-cta{font-size:8px !important; gap:5px !important}
  html.force-desktop .editable-book-link{font-size:8px !important}
  html.force-desktop .edit-copy h3{font-size:10px !important}
  html.force-desktop .edit-copy p{font-size:7px !important}
  html.force-desktop .learn-more{font-size:8px !important; gap:6px !important}
  html.force-desktop .sp-topbar-wrap{height:67px !important}
}
.m-back-to-mobile{
  display:none;
  position:fixed; left:0; right:0; top:0; z-index:200;
  align-items:center; justify-content:center; gap:10px;
  padding:10px 16px;
  background:#0b2853; color:#fff;
  font-family:"Segoe UI",Arial,Helvetica,sans-serif;
  font-size:13px; font-weight:600;
  text-align:center;
}
html.force-desktop .m-back-to-mobile{display:flex}
.m-back-to-mobile a{color:#8fd0ff; text-decoration:underline; font-weight:700}

/* =========================================================
   Subpage framework -- shared shell for pages other than the
   homepage. Same overall width as the homepage stage, but its
   height grows with content instead of being a fixed poster.
   The tile row and the fish/turtle/coral decorations are the
   actual homepage artwork, cropped -- not redrawn -- so nothing
   here loses the original illustration.
   ========================================================= */
.sp-page-backdrop{
  background:#eef8fc;
  min-height:100%;
}
.sp-stage{
  position:relative;
  width:min(100vw, 1536px, calc(100vh * 1536 / 1024));
  margin:0 auto;
  background:#ecf2f9;
  overflow:hidden;
  border-radius:42px;
  box-shadow:0 0 0 1px rgba(11,40,83,.05);
  container-type:inline-size;
}

/* ---------- Top bar: logo, nav, book button -- reuses the homepage's own
   .logo-replacement / .editable-top-nav / .editable-book-link classes and
   left/width percentages so the links sit at the exact same spot as on the
   homepage and never visibly shift when navigating between pages. Only
   top/height are re-scaled here, since this bar's own height (129px at
   1536px stage width) differs from the homepage's full 1024px-tall stage. ---------- */
.sp-topbar-wrap{
  position:relative;
  height:8.398vw;
  height:max(60px,min(8.398vw,12.597vh,129px));
  background:#ecf2f9;
}
.sp-topbar-wrap .logo-replacement{top:0; height:100%}
.sp-topbar-wrap .editable-top-nav{top:32.9%; height:43.26%}
.sp-topbar-wrap .editable-book-link{top:29.92%; height:43.26%}

/* ---------- Flexible content area: each subpage fills this in.
   Content and the artwork image share the same grid cell: content
   is pinned to the TOP so it sits beside the artwork (which shows
   through on the right, nothing wasted) when content is short.
   The artwork image is pinned to the BOTTOM of that shared cell, so
   if content grows taller than the artwork, the artwork's bottom
   edge stays flush with content's bottom edge -- meaning the whole
   artwork gets pushed down as one piece to make room, and the tile
   row (a normal sibling right after this area) stays glued to the
   artwork's bottom with zero gap either way. ---------- */
.sp-hero-area{
  display:grid;
  background:#ecf2f9;
}
.sp-content,
.sp-decor-img{
  grid-column:1;
  grid-row:1;
}
.sp-content{
  align-self:start;
  max-width:56%;
  padding:clamp(24px,4vw,60px) clamp(20px,4vw,64px);
  box-sizing:border-box;
  position:relative;
  z-index:2;
}
.sp-decor-img{
  align-self:end;
  width:100%;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
}

/* ---------- Tile row: the homepage's own actual tile artwork, cropped as-is (DIVE/LEARN's
   baked-in shadow corrected in place, nothing copied or transplanted), with the live
   text/icons positioned using the exact same percentages the homepage itself uses. ---------- */
.sp-tiles-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1536/222;
  background:url("../assets/subpage-tiles-final.png?v=20260823a");
  background-size:100% 100%;
  background-repeat:no-repeat;
}
.sp-tiles-wrap .copy-dive{left:11.52%; width:13.74%; top:10%; height:56%;}
.sp-tiles-wrap .copy-learn{left:35.87%; width:12.70%; top:10%; height:56%;}
.sp-tiles-wrap .copy-journal{left:59.18%; width:12.50%; top:10%; height:56%;}
.sp-tiles-wrap .copy-story{left:82.36%; width:12.96%; top:10%; height:56%;}
.sp-tiles-wrap .learn-link{width:13%; height:14%;}
.sp-tiles-wrap .learn1{left:11.52%; top:62%;}
.sp-tiles-wrap .learn2{left:35.87%; top:62%;}
.sp-tiles-wrap .learn3{left:59.18%; top:62%;}
.sp-tiles-wrap .learn4{left:82.36%; top:62%;}
.sp-tiles-wrap .learn-more{top:68%;}
.sp-tiles-wrap .lm-dive{left:11.52%;}
.sp-tiles-wrap .lm-learn{left:35.87%;}
.sp-tiles-wrap .lm-journal{left:59.18%;}
.sp-tiles-wrap .lm-story{left:82.36%;}
.sp-tiles-wrap .story-html-icon{left:75.98%; top:12.61%; width:5.47%;}

/* ---------- Footer: social row + copyright, extends past the tile row within the same shell ---------- */
.sp-footer{
  background:#f4f7fb;
  padding:clamp(9px,1.2vw,15px) clamp(20px,4vw,64px) clamp(12px,1.5vw,20px);
  text-align:center;
}
.sp-social{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,1.8vw,26px);
  margin-bottom:clamp(12px,1.6vw,20px);
}
.sp-social a{
  display:flex; align-items:center; justify-content:center;
  width:clamp(34px,3.2vw,44px); height:clamp(34px,3.2vw,44px);
  border-radius:999px;
  background:#0b2853;
  color:#fff;
}
.sp-social a:hover{background:#075DB8}
.sp-social svg{width:52%; height:52%}
.sp-copyright{
  color:#5b6b83;
  font-size:clamp(10px,0.78vw,13px);
}

/* ---------- "Before We Open" page copy ---------- */
.sp-eyebrow{
  margin:0 0 10px;
  color:#0E86C4;
  font-weight:800;
  font-size:clamp(11px,0.85vw,14px);
  letter-spacing:.12em;
  text-transform:uppercase;
}
.sp-heading{
  margin:0 0 18px;
  color:#0b2853;
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.01em;
  font-size:clamp(26px,3.4vw,52px);
}
.sp-heading-accent{color:#0E86C4}
.sp-lead{
  margin:0 0 12px;
  color:#0b2853;
  font-weight:600;
  line-height:1.5;
  font-size:clamp(14px,1.15vw,18px);
}
.sp-sub{
  margin:0 0 22px;
  color:#5b6b83;
  line-height:1.6;
  font-size:clamp(13px,0.95vw,15px);
}
.sp-back-home{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0 clamp(20px,2vw,30px);
  min-height:clamp(38px,3.4vw,52px);
  background:#075DB8;
  color:#fff;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  font-size:clamp(12px,0.95vw,15px);
  border-radius:999px;
}
.sp-back-home:hover{background:#064a94}
.sp-closing-tagline{
  margin:20px 0 0;
  color:#0E86C4;
  font-weight:700;
  font-size:clamp(13px,1vw,16px);
}