/* ===================================================================
   The Mount St Penthouse — West Perth
   Palette taken from the residence's own photography at blue hour:
   petrol-dark sky, travertine, brass festoon light, pool teal.
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,200;0,9..144,300;0,9..144,400;1,9..144,200;1,9..144,300&family=Public+Sans:wght@300;400;500;600&display=swap');

:root{
  --night:    #0B1417;   /* blue-hour sky */
  --night-2:  #111E22;
  --night-3:  #16262B;
  --travertine:#EDE5D8;  /* the stone in the photos */
  --travertine-2:#F6F1E8;
  --brass:    #C79A4B;   /* festoon light */
  --glow:     #EFCE93;
  --teal:     #4E8C8A;   /* pool */
  --ink:      #10191C;
  --ink-2:    #3F4A4C;
  --on-dark:  rgba(237,229,216,.72);
  --on-dark-2:rgba(237,229,216,.46);
  --hair:     rgba(199,154,75,.28);
  --hair-2:   rgba(237,229,216,.13);
  --hair-lt:  rgba(16,25,28,.14);

  --display:'Fraunces', Georgia, serif;
  --body:'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter:30px;
  --max:1280px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body.ptn{
  margin:0;
  background:var(--night);
  color:var(--on-dark);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.78;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.ptn img{max-width:100%;display:block;}
.ptn a{color:inherit;text-decoration:none;}
.ptn ul{margin:0;padding:0;list-style:none;}
.ptn .wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter);}
.ptn .narrow{max-width:800px;}
.ptn section{padding:clamp(72px,10vw,150px) 0;}

/* film grain — tactile, very low */
body.ptn::after{
  content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;pointer-events:none;opacity:.10;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.ptn h1,.ptn h2,.ptn h3{
  font-family:var(--display);
  font-weight:200;
  letter-spacing:-.035em;
  line-height:1.02;
  margin:0 0 .42em;
  color:var(--travertine-2);
}
.ptn h1{font-size:clamp(46px,9.2vw,132px);}
.ptn h2{font-size:clamp(30px,4.6vw,62px);}
.ptn h3{font-size:clamp(20px,2vw,26px);font-weight:300;letter-spacing:-.02em;}
.ptn p{margin:0 0 1.2em;}
.ptn p:last-child{margin-bottom:0;}
.ptn em{font-style:italic;color:var(--brass);}

.ptn .lede{
  font-size:clamp(18px,1.85vw,23px);
  line-height:1.62;font-weight:300;
  color:rgba(237,229,216,.86);
}

.ptn .label{
  display:inline-block;
  font-size:10px;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;
  color:var(--brass);margin-bottom:26px;
}
.ptn .label::after{
  content:"";display:block;height:1px;width:44px;
  background:var(--hair);margin-top:14px;
}

/* ---------- light panels ---------- */
.panel-light{background:var(--travertine-2);color:var(--ink-2);}
.panel-light h1,.panel-light h2,.panel-light h3{color:var(--ink);}
.panel-light .lede{color:var(--ink);}
.panel-light .label{color:#8A6520;}
.panel-light .label::after{background:rgba(16,25,28,.2);}
.panel-light em{color:#8A6520;}

/* ---------- bar ---------- */
.ptn-bar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  background:linear-gradient(180deg,rgba(11,20,23,.82),rgba(11,20,23,0));
  transition:background .4s ease,backdrop-filter .4s ease;
}
.ptn-bar.solid{
  background:rgba(11,20,23,.9);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hair-2);
}
.ptn-bar .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-top:20px;padding-bottom:20px;
}
.ptn-bar a,.ptn-bar .mark{
  font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  font-weight:500;color:var(--on-dark-2);transition:color .3s ease;
}
.ptn-bar a:hover{color:var(--glow);}
.ptn-bar .mark{
  font-family:var(--display);font-size:15px;letter-spacing:.04em;
  text-transform:none;color:var(--travertine);font-weight:300;
}
.ptn-bar .mark em{color:var(--brass);}
@media (max-width:720px){ .ptn-bar .mark{display:none;} }

/* ---------- hero ---------- */
.ptn-hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  padding:0;overflow:hidden;
}
.ptn-hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;}
.ptn-hero-bg img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
  animation:drift 26s ease-in-out infinite alternate;
}
@keyframes drift{
  from{transform:scale(1.06) translate3d(0,0,0);}
  to  {transform:scale(1.14) translate3d(0,-1.6%,0);}
}
.ptn-hero-bg::after{
  content:"";position:absolute;top:0;right:0;bottom:0;left:0;
  background:
    linear-gradient(180deg,rgba(11,20,23,.55) 0%,rgba(11,20,23,.18) 28%,rgba(11,20,23,.80) 62%,rgba(11,20,23,.95) 100%),
    linear-gradient(90deg,rgba(11,20,23,.60) 0%,rgba(11,20,23,.20) 52%,transparent 78%);
}
.ptn-hero .wrap{position:relative;z-index:3;padding-bottom:clamp(52px,7vw,96px);width:100%;}
.ptn-hero h1{
  margin-bottom:0;
  font-weight:300;
  letter-spacing:-.028em;
  color:#FFFDF8;
  text-shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 60px rgba(0,0,0,.55);
}
.ptn-hero h1 em{
  color:#F5D9A2;
  text-shadow:0 1px 2px rgba(0,0,0,.5), 0 14px 60px rgba(0,0,0,.55);
}
.ptn-hero .label{color:var(--glow);}
.ptn-hero .label::after{background:rgba(239,206,147,.45);}
.ptn-hero .lede{
  max-width:44ch;margin-top:28px;
  color:rgba(255,253,248,.94);
  text-shadow:0 1px 18px rgba(0,0,0,.6);
}
.ptn-hero .label{text-shadow:0 1px 12px rgba(0,0,0,.6);}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;z-index:4;transform:translateX(-50%);
  width:1px;height:52px;background:linear-gradient(180deg,transparent,var(--hair));
}
@media (max-width:720px){ .scroll-cue{display:none;} }

/* ---------- spec ---------- */
.ptn-spec{background:var(--night-2);}
.ptn-spec .wrap{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,3vw,48px);
  padding-top:clamp(30px,3.4vw,44px);
  padding-bottom:clamp(30px,3.4vw,44px);
}
.ptn-spec dt{
  font-size:9.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--on-dark-2);font-weight:600;margin-bottom:10px;
}
.ptn-spec dd{
  margin:0;font-family:var(--display);font-weight:200;
  font-size:clamp(20px,2.1vw,27px);letter-spacing:-.02em;
  color:var(--travertine-2);line-height:1.2;
}
@media (max-width:820px){
  .ptn-spec .wrap{grid-template-columns:1fr 1fr;gap:26px 24px;}
}

/* ---------- statement ---------- */
.ptn-quote{
  font-family:var(--display);font-weight:200;font-style:italic;
  font-size:clamp(28px,5vw,64px);line-height:1.16;letter-spacing:-.035em;
  color:var(--travertine-2);max-width:17ch;margin:0 0 44px;
}
.ptn-quote span{color:var(--brass);}

/* ---------- feature rows ---------- */
.ptn-rows{border-top:1px solid var(--hair);}
.ptn-row{
  display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(20px,4vw,56px);
  padding:clamp(26px,3vw,42px) 0;
  border-bottom:1px solid var(--hair-2);
  align-items:baseline;transition:border-color .4s ease;
}
.ptn-row:hover{border-bottom-color:var(--hair);}
.ptn-row h3{margin:0;}
.ptn-row p{margin:0;font-size:15.5px;color:var(--on-dark);}
@media (max-width:760px){ .ptn-row{grid-template-columns:1fr;gap:8px;} }

/* ---------- figures & gallery ---------- */
.ptn-figure{position:relative;overflow:hidden;background:var(--night-3);height:260px;aspect-ratio:4/3;}
@supports (aspect-ratio:4/3){ .ptn-figure{height:auto;} }
.ptn-figure img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.22,.61,.36,1);}
.ptn-figure:hover img{transform:scale(1.045);}

.ptn-gallery{
  display:flex;flex-wrap:wrap;justify-content:center;
  gap:clamp(16px,1.8vw,26px);
}
.ptn-gallery figure{
  margin:0;
  flex:0 1 calc((100% - 2*clamp(16px,1.8vw,26px)) / 3);
  min-width:0;
}
@media (max-width:900px){
  .ptn-gallery figure{flex:0 1 calc((100% - clamp(16px,1.8vw,26px)) / 2);}
}
@media (max-width:600px){
  .ptn-gallery figure{flex:0 1 100%;}
}
.ptn-gallery figcaption,.ptn-cap{
  margin-top:13px;font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--on-dark-2);
}
.panel-light .ptn-gallery figcaption,.panel-light .ptn-cap{color:rgba(16,25,28,.5);}

/* ---------- amenities ---------- */
.ptn-amen{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(28px,3.4vw,56px);
}
.ptn-amen h4{
  font-family:var(--body);font-size:9.5px;letter-spacing:.26em;
  text-transform:uppercase;color:#8A6520;font-weight:600;margin:0 0 18px;
}
.ptn-amen li{
  font-size:15px;color:var(--ink-2);padding:5px 0;
}
@media (max-width:900px){ .ptn-amen{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .ptn-amen{grid-template-columns:1fr;} }

/* ---------- location ---------- */
.ptn-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px);align-items:center;}
@media (max-width:880px){ .ptn-split{grid-template-columns:1fr;gap:34px;} }
.ptn-dist{border-top:1px solid var(--hair);}
.ptn-dist-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:17px 0;border-bottom:1px solid var(--hair-2);
}
.ptn-dist-row b{font-weight:400;color:var(--travertine-2);font-size:16px;}
.ptn-dist-row span{
  font-family:var(--display);font-weight:200;font-size:16px;
  color:var(--brass);font-variant-numeric:tabular-nums;
}

/* ---------- map ---------- */
.ptn-map{
  position:relative;overflow:hidden;
  background:var(--night-3);
  height:420px;                 /* fallback for browsers without aspect-ratio */
  aspect-ratio:4/3;
}
@supports (aspect-ratio:4/3){ .ptn-map{height:auto;} }
.ptn-map iframe{
  position:absolute; top:0; left:0;
  width:100%;height:100%;border:0;display:block;
  filter:grayscale(1) invert(.92) contrast(.85) brightness(.95);
}
@media (max-width:880px){ .ptn-map{height:320px;aspect-ratio:16/10;} }
@supports (aspect-ratio:16/10){ @media (max-width:880px){ .ptn-map{height:auto;} } }

/* ---------- notes ---------- */
.ptn-notes{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,4vw,60px);}
.ptn-note{border-top:1px solid var(--hair);padding-top:22px;}
.ptn-note h4{
  font-family:var(--display);font-weight:300;font-size:20px;
  margin:0 0 10px;color:var(--travertine-2);letter-spacing:-.02em;
}
.ptn-note p{font-size:15px;margin:0;}
@media (max-width:700px){ .ptn-notes{grid-template-columns:1fr;} }

/* ---------- buttons ---------- */
.ptn-btn{
  display:inline-flex;align-items:center;gap:12px;
  padding:17px 34px;font-size:10.5px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;
  border:1px solid var(--brass);color:var(--glow);background:transparent;
  cursor:pointer;transition:background .35s ease,color .35s ease;
}
.ptn-btn:hover{background:var(--brass);color:var(--night);}
.ptn-btn.solid{background:var(--brass);color:var(--night);}
.ptn-btn.solid:hover{background:var(--glow);border-color:var(--glow);}
.panel-light .ptn-btn{border-color:#8A6520;color:#8A6520;}
.panel-light .ptn-btn:hover{background:#8A6520;color:var(--travertine-2);}
.panel-light .ptn-btn.solid{background:var(--ink);border-color:var(--ink);color:var(--travertine-2);}
.panel-light .ptn-btn.solid:hover{background:#8A6520;border-color:#8A6520;}
.ptn-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:38px;}

/* ---------- closing ---------- */
.ptn-close{position:relative;overflow:hidden;}
.ptn-close .wrap{max-width:760px;text-align:center;position:relative;z-index:2;}
.ptn-close .label::after{margin-left:auto;margin-right:auto;}
.ptn-close .ptn-actions{justify-content:center;}

/* ---------- footer ---------- */
.ptn-footer{background:#070E10;padding:76px 0 34px;font-size:14.5px;color:var(--on-dark-2);}
.ptn-footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px;margin-bottom:52px;}
@media (max-width:700px){ .ptn-footer .grid{grid-template-columns:1fr;gap:32px;} }
.ptn-footer .mark{
  font-family:var(--display);font-size:21px;font-weight:200;
  color:var(--travertine);display:block;margin-bottom:16px;letter-spacing:-.01em;
}
.ptn-footer .mark em{color:var(--brass);}
.ptn-footer h4{
  font-family:var(--body);font-size:9.5px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--on-dark-2);margin:0 0 18px;
}
.ptn-footer li{margin-bottom:10px;}
.ptn-footer a:hover{color:var(--glow);}
.ptn-footer .base{
  border-top:1px solid var(--hair-2);padding-top:26px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  font-size:12px;letter-spacing:.04em;color:rgba(237,229,216,.34);
}

/* ---------- motion ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.1s;}
.reveal.d2{transition-delay:.2s;}
.reveal.d3{transition-delay:.3s;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  .ptn-hero-bg img{animation:none;}
  .ptn-figure img{transition:none;}
}

.ptn a:focus-visible,.ptn button:focus-visible{outline:2px solid var(--brass);outline-offset:4px;}