@font-face{font-family:'Avenir Next';src:url('assets/fonts/avenir-next-medium.woff2') format('woff2');font-weight:400 500;font-display:swap}
@font-face{font-family:'Avenir Next';src:url('assets/fonts/avenir-next-bold.woff2') format('woff2');font-weight:600 900;font-display:swap}
@font-face{font-family:'Linotype Didot';src:url('assets/fonts/didot-linotype.woff2') format('woff2');font-weight:400;font-display:swap}



/* The editor shell. One token set, four type sizes, and no control that
   renders in whatever the browser felt like. The sheet below styles itself. */
:root{
  --ink:#302b32;--muted:#726e72;--line:#d5d0d3;--paper:#fffefa;--sheet:#ffffff;
  --accent:#9b7b31;                      /* brass, the document's own */
  --shell:#eceaeb;--panel:#f5f3f4;--raise:#e6e2e4;--sunk:#e2dde0;
  --sans:'Avenir Next',Arial,sans-serif;--serif:'Linotype Didot',Didot,serif;
  --label:11px;--body:12px;--title:14px;--display:26px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--shell);color:var(--ink);font:var(--body)/1.5 var(--sans)}
a{color:inherit}

/* ---- controls ------------------------------------------------------- */
button,input,select,textarea{font:inherit;color:inherit}
button,select,label.file{cursor:pointer}
button,select,label.file{
  border:1px solid var(--line);background:var(--paper);
  padding:9px 12px;min-height:38px;border-radius:0;
  font-size:var(--body);line-height:1.2;text-align:left;
  transition:background .12s,border-color .12s}
button:hover,select:hover,label.file:hover{background:var(--raise);border-color:#c6c0c4}
button:active{background:var(--sunk)}
button:disabled{opacity:.32;cursor:default;background:var(--paper)}
button:disabled:hover{background:var(--paper);border-color:var(--line)}
button.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
button.primary:hover{background:#463f47;border-color:#463f47}
:where(button,select,input,label.file,[contenteditable]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* an icon-only control is square and draws its own glyph */
button.icon{display:grid;place-items:center;width:38px;padding:0}
button.icon svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* a select keeps its native behaviour and loses its native chrome */
select{
  appearance:none;-webkit-appearance:none;padding-right:30px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23302b32' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 7px center;background-size:16px}

/* the file pickers are hidden; a label drives them */
input[type=file]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

input[type=range]{appearance:none;-webkit-appearance:none;width:100%;
  background:transparent;height:22px;padding:0;border:0;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line)}
input[type=range]::-moz-range-track{height:2px;background:var(--line)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;
  width:14px;height:14px;margin-top:-6px;border-radius:50%;
  background:var(--accent);border:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
  background:var(--accent);border:0}

/* ---- layout --------------------------------------------------------- */
.layout{display:grid;grid-template-columns:190px minmax(0,1fr) 224px;min-height:100dvh}
.sidebar,.inspector{background:var(--panel);padding:28px 16px}
.sidebar{border-right:1px solid var(--line)}
.inspector{border-left:1px solid var(--line)}
.workarea{min-width:0}
.canvas{padding:4px 20px 32px;min-height:600px;overflow:auto;
  display:flex;flex-direction:column;align-items:center}
.sheet-wrap{flex-shrink:0;position:relative}

.eyebrow{font-size:var(--label);letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 20px;color:var(--muted)}
.story-button{display:block;width:100%;padding:13px 12px;border:0;
  border-top:1px solid var(--line);background:transparent;min-height:0}
.story-button:hover{background:var(--raise)}
.story-button.active{background:var(--paper);box-shadow:inset 2px 0 var(--accent)}
.story-button span{font-size:var(--label);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:5px}
.story-button strong{font-size:var(--title);font-weight:500}
.sidebar-note{font-size:var(--label);line-height:1.7;color:var(--muted);margin:26px 8px}

.workbar{display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;gap:12px;flex-wrap:wrap}
.workbar .group{display:flex;gap:6px;align-items:center}
.workbar select{max-width:120px}
.page-info{font-size:var(--label);color:var(--muted);white-space:nowrap}

.workspace-actions{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:24px}
.top-actions{display:flex;flex-wrap:wrap;gap:7px}
.top-actions button{width:auto;margin:0}
.save-label{font-size:var(--label);width:100%;line-height:1.6;margin-bottom:7px;color:var(--muted)}
.inspector h2{font:var(--display)/1.1 var(--serif);font-weight:400;margin:0 0 18px}
.inspector p{font-size:var(--body);line-height:1.6;color:var(--muted)}
.inspector label{font-size:var(--label);display:block;margin:16px 0 7px;color:var(--muted)}
.inspector button,.inspector label.file{width:100%;margin-bottom:7px}
.inspector .rule{border-top:1px solid var(--line);margin:24px 0}
.inspector .hint,.font-status{font-size:var(--label);color:var(--muted)}

.notice{padding:12px 22px;background:var(--paper);border-bottom:2px solid var(--accent);
  font-size:var(--body);line-height:1.6;display:flex;gap:12px;
  align-items:center;justify-content:space-between}
.notice[hidden]{display:none}
.loading{padding:90px 25px;font:var(--display) var(--serif);text-align:center;color:var(--muted)}
.mobile-select{display:none}
.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);
  background:var(--ink);color:var(--paper);padding:12px 20px;z-index:100;
  max-width:90vw;font-size:var(--body)}
.toast:empty{display:none}

dialog{border:1px solid var(--line);padding:28px;max-width:450px;width:90vw;
  background:var(--paper);color:var(--ink);margin:auto}
dialog::backdrop{background:#302b3266;backdrop-filter:blur(2px)}
dialog h2{font:var(--display)/1.1 var(--serif);font-weight:400;margin:0 0 14px}
dialog p{line-height:1.7;font-size:var(--body);color:var(--muted)}
dialog .actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
dialog button{margin:0}
dialog .dialog-select{width:100%;margin:4px 0 6px}
.passcode-input{width:100%;margin:16px 0 4px;padding:14px 12px;border:1px solid var(--line);
  background:var(--paper);color:var(--ink);font:400 26px/1 var(--serif);
  letter-spacing:.42em;text-align:center;text-indent:.42em}
.passcode-input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.passcode-error{font-size:var(--label);color:#8c3a3a;margin:6px 0 0;min-height:1.2em}
.passcode-error[hidden]{display:none}

.measure{position:fixed!important;left:-20000px!important;top:0;visibility:hidden;pointer-events:none}
.print-stage{display:none}

/* The page is a bounded website composition, independent of the editor shell. */
.sheet{--density:1;--hero-height:320px;--hero-standard:278px;position:absolute;top:0;left:0;transform-origin:top left;width:794px;height:1123px;background:var(--sheet);color:#302b32;box-shadow:0 12px 35px #32203417;display:flex;flex-direction:column;overflow:hidden;font-family:var(--sans)}
.page-body{flex:1;min-height:0;display:flex;flex-direction:column}.hero-slot{flex-shrink:0}.content-viewport{flex:1;min-height:0;padding:22px 32px 10px}.content-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:calc(20px * var(--density)) 20px;align-content:start;align-items:start}.block{position:relative;min-width:0;margin:0}.hero{height:var(--hero-standard);position:relative;background:#342837;color:#fffefa;isolation:isolate;overflow:hidden}.hero .photo-frame{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;z-index:-2}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 46%,rgba(0,0,0,0) 76%),linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,0) 62%);z-index:-1;pointer-events:none}/* IHG's own horizontal lockup. Below about 20px the two lines of HOTELS &
   RESORTS stop being readable, which is why IHG publishes a small-use mark;
   at 22px the full lockup still holds, so it is the one used. Optically
   centred on the kicker opposite it. */
.hero-mark{position:absolute;top:21px;right:32px;height:22px;width:auto;z-index:1}
.hero .kicker{position:absolute;top:26px;left:32px;font-size:10px;letter-spacing:.23em;text-transform:uppercase}.hero h1{font:66px/.99 var(--serif);letter-spacing:-.022em;font-weight:400;white-space:pre-line;margin:0;position:absolute;bottom:49px;left:32px;max-width:720px;overflow-wrap:anywhere}.hero .subtitle{position:absolute;bottom:20px;left:32px;right:32px;font-size:11px;line-height:1.45;margin:0;white-space:pre-line}.photo-frame{position:relative;background:#e4dee2;aspect-ratio:16/9;overflow:hidden;display:block;width:100%;border:0;padding:0}.photo-frame img{display:block;width:100%;height:100%;object-fit:cover}.photo-frame.empty{background:#ccc5cb}.photo-frame.empty:before{content:'Add a photograph';position:absolute;inset:0;display:grid;place-items:center;font-size:14px;letter-spacing:2px;color:#584b56}.caption{font-size:8.5px;line-height:1.45;margin:5px 0 0;color:var(--muted);white-space:pre-line}.block h2{font:26px/1.1 var(--serif);font-weight:400;margin:0 0 calc(9px * var(--density));color:var(--accent);white-space:pre-line;overflow-wrap:anywhere}.block.text .body{font-size:11px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}.block.text.intro h2{font:600 10px var(--sans);letter-spacing:.23em;text-transform:uppercase;margin-bottom:5px}.block.text.intro .body{font-size:11px;line-height:1.5}.block.text.reservation{padding-top:5px;border-top:1px solid #bfb3bd40}.block.text.reservation h2{font:600 10px var(--sans);display:inline-block;margin:0 12px 0 0}.block.text.reservation .body{display:inline;font-size:9.5px;line-height:1.4;white-space:pre-line}.block.text.display h2{font-size:60px;letter-spacing:-.022em;color:var(--accent);line-height:1.02}.block.columns{display:grid;grid-template-columns:1fr 1fr;gap:20px}.block.columns.stack{grid-template-columns:1fr;gap:calc(10px * var(--density))}.column h3{font-size:9.5px;line-height:1.2;margin:0 0 calc(6px * var(--density));color:var(--accent);font-weight:600}.column .body{font-size:11px;line-height:1.5;white-space:pre-line;overflow-wrap:anywhere}.columns.terms{padding-top:calc(12px * var(--density));border-top:1px solid #c5bcc4}.columns.terms .body{font-size:8.5px;line-height:1.5}.block.table h2{margin-bottom:8px}.data-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:11px;line-height:1.4}.data-table th{text-align:left;font-weight:600;font-size:9.5px;padding:calc(6px * var(--density)) 9px calc(7px * var(--density)) 0;border-bottom:1px solid var(--accent);color:var(--accent)}.data-table td{padding:calc(5.4px * var(--density)) 9px calc(5.4px * var(--density)) 0;border-bottom:1px solid #cfc5cd65;vertical-align:top;overflow-wrap:anywhere;white-space:pre-line}.data-table th:first-child,.data-table td:first-child{width:42%}.data-table th:last-child,.data-table td:last-child{padding-right:0}.table-note{font-size:8.5px;line-height:1.4;margin:calc(7px * var(--density)) 0 0;color:var(--muted);white-space:pre-line}.offer{padding:calc(17px * var(--density)) 0;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:7px 20px;border-bottom:1px solid #c3b6c1}.offer h2{font-size:26px;margin:0}.offer .value{font:40px/1.1 var(--serif);letter-spacing:-.022em;color:var(--accent);text-align:right;white-space:pre-line}.offer .body{grid-column:1/-1;font-size:11px;line-height:1.55;white-space:pre-line}.offer.callout{grid-template-columns:1fr;padding:16px 0 0;background:none;border:0;border-top:2px solid var(--accent);gap:9px}.offer.callout .value{text-align:left}.page-foot{margin:16px 32px 22px;min-height:78px;display:grid;grid-template-columns:minmax(0,1fr) 122px;gap:30px;align-items:end;flex-shrink:0}.page-foot .contact{font-size:8.5px;line-height:1.5;color:var(--muted);max-width:520px;display:grid;gap:2px}
.contact-name{font-weight:600;color:var(--ink)}
.contact-row{display:flex;flex-wrap:wrap;gap:3px 14px;align-items:baseline}
.contact-item{display:inline-flex;gap:4px;align-items:baseline;min-width:0}
.contact-value{min-width:0}
.ci{flex:none;align-self:center;line-height:0}
.ci svg{width:8.5px;height:8.5px;display:block;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ci svg[data-solid]{fill:var(--accent);stroke:none}.footer-logo{width:110px;display:flex;justify-content:flex-end;align-items:flex-end}.footer-logo img{width:100%;height:auto;display:block}
/* Distinct openings, held together by the same grid and type system. */


.story-longstay .data-table th:first-child,.story-longstay .data-table td:first-child{width:7%}.story-longstay .data-table th:nth-child(2),.story-longstay .data-table td:nth-child(2){width:51%}.story-longstay .data-table th:nth-child(3),.story-longstay .data-table td:nth-child(3){width:9%}
.story-meeting .data-table th:first-child,.story-meeting .data-table td:first-child{width:23%}.story-meeting .data-table th:nth-child(2),.story-meeting .data-table td:nth-child(2){width:24%}
.story-wedding .hero .photo-frame{object-position:center 40%}.companion .content-viewport{padding-top:30px}.companion .content-grid{gap:25px 24px}.companion .photo-frame{aspect-ratio:16/9}
.story-engagement .data-table th:first-child,.story-engagement .data-table td:first-child{width:25%}.story-engagement .data-table th:nth-child(2),.story-engagement .data-table td:nth-child(2){width:17%}.story-engagement .offer{border-top:2px solid var(--accent);border-bottom:1px solid #c3b6c1;background:none;padding:16px 0}
/* Long stays and outside catering set their own opening: one is the
   densest page in the set, the other the lightest. */
.story-longstay .hero{height:calc(var(--hero-height) - 60px)}
.story-catering .hero{height:calc(var(--hero-height) + 110px)}.story-catering .photo .photo-frame{aspect-ratio:16/9}
.sheet [contenteditable=true]{outline:0;cursor:text;min-height:1em}.sheet [contenteditable=true]:hover{box-shadow:0 0 0 1px #af96a9}.sheet [contenteditable=true]:focus{box-shadow:0 0 0 2px #ab728c;background:#d7b8ce22}.sheet.editing .photo-frame{cursor:pointer}.sheet.editing .photo-frame:hover:after{content:'Replace / reposition';position:absolute;z-index:2;bottom:12px;right:12px;color:white;background:#48354b;padding:8px 12px;font-size:12px}.selected-cell{background:#eaddE6!important}.preview .sidebar,.preview .edit-action,.preview .inspector>div:not(.workspace-actions){display:none!important}.preview .layout{grid-template-columns:minmax(0,1fr) 190px}.preview .workspace-actions{border:0}.preview .canvas{padding-top:10px}
@media(max-width:1150px){.layout{grid-template-columns:160px minmax(0,1fr)}.inspector{grid-column:1/-1;border-top:1px solid var(--line);display:flex;gap:24px;flex-wrap:wrap}.inspector>div{min-width:220px;flex:1}.inspector .rule{display:none}.workspace-actions{border:0}.preview .layout{display:block}.preview .inspector{display:block}}
@media(max-width:700px){.layout{display:block;min-height:0}.sidebar{display:none}.mobile-select{display:block;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--paper);padding:14px 16px}.workbar{padding:12px;gap:8px}.workbar .group{gap:4px}.workbar button{padding:7px 10px;min-height:38px}.workbar select{max-width:95px}.canvas{padding:4px 10px 24px;min-height:300px;align-items:flex-start}.sheet-wrap{margin:auto}.inspector{display:block;padding:20px}.inspector button{display:inline-block;width:auto;margin-right:5px}.inspector>div{margin-bottom:24px}.notice{padding:10px 14px;align-items:flex-start}.page-info{font-size:11px}.preview .mobile-select{display:block}.preview .canvas{align-items:flex-start}}
@media print{@page{size:A4 portrait;margin:0}html,body{background:white!important;margin:0!important;padding:0!important}.layout,.notice,.mobile-select,.toast,dialog,.measure{display:none!important}.print-stage{display:block!important}.print-stage .sheet{position:relative;transform:none!important;box-shadow:none;width:210mm;height:297mm;break-after:page;page-break-after:always;zoom:1}.print-stage .sheet:last-child{break-after:auto;page-break-after:auto}.sheet [contenteditable]{box-shadow:none!important;background:none!important}.selected-cell{background:transparent!important}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* ---------------------------------------------------------------------------
   Movement. A tool people use all day should feel settled, not busy: things
   that appear ease in, things that respond do it in about a tenth of a second,
   and nothing moves that the reader did not ask to move. The sheet itself is
   never animated - it is paper.
--------------------------------------------------------------------------- */
:root{--ease:cubic-bezier(.2,.7,.3,1);--quick:.12s;--settle:.34s}

@media (prefers-reduced-motion:no-preference){

  /* the shell arrives, once */
  .sidebar,.workbar,.inspector{animation:rise var(--settle) var(--ease) both}
  .workbar{animation-delay:.04s}
  .inspector{animation-delay:.08s}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

  /* a chosen flyer settles onto the canvas */
  .sheet-wrap{animation:settle var(--settle) var(--ease) both}
  @keyframes settle{from{opacity:0;transform:translateY(10px) scale(.994)}to{opacity:1;transform:none}}

  /* controls answer immediately, and let go slowly */
  button,select,label.file,.story-button{transition:background var(--quick) var(--ease),
    border-color var(--quick) var(--ease),color var(--quick) var(--ease),
    box-shadow var(--quick) var(--ease),transform var(--quick) var(--ease)}
  button:active,label.file:active{transform:translateY(1px)}
  button.icon svg{transition:transform var(--settle) var(--ease)}
  #undo:not(:disabled):hover svg{transform:rotate(-18deg)}
  #redo:not(:disabled):hover svg{transform:rotate(18deg)}
  #prev:not(:disabled):hover svg{transform:translateX(-2px)}
  #next:not(:disabled):hover svg{transform:translateX(2px)}

  /* the active flyer's brass rule draws itself in */
  .story-button{position:relative}
  .story-button.active{box-shadow:none}
  .story-button::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--accent);transform:scaleY(0);transform-origin:top;
    transition:transform var(--settle) var(--ease)}
  .story-button.active::before{transform:scaleY(1)}

  /* a field being edited warms rather than flashes */
  .sheet [contenteditable=true]{transition:box-shadow var(--quick) var(--ease),
    background var(--quick) var(--ease)}

  /* word from the app: the toast rises, the notice unrolls */
  .toast{animation:toast var(--settle) var(--ease) both}
  @keyframes toast{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
  .notice:not([hidden]){animation:unroll var(--settle) var(--ease) both}
  @keyframes unroll{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* a dialog opens like a drawer, and its ground dims behind it */
  dialog[open]{animation:lift var(--settle) var(--ease) both}
  @keyframes lift{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}
  dialog[open]::backdrop{animation:dim var(--settle) var(--ease) both}
  @keyframes dim{from{opacity:0}to{opacity:1}}
}

/* Nothing above may reach the printed sheet. */
@media print{*,*::before,*::after{animation:none!important;transition:none!important}}